[폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기

Posted by Readiz
2014.02.22 02:17 Creation/Design



http://www.google.com/fonts/


Google Fonts를 이용하여 영문글꼴 웹폰트 적용시키기



  구글은 참 훌륭한 서비스를 많이 제공하고 있습니다. 제 블로그는 지금 돋움글꼴로 설정이 되어 있는데(나눔글꼴 적용결과 페이지 로딩이 너무 심하더군요) 이게 싫어서 구글 Fonts에 들어가보니 한방에 적용가능하게 구현되어 있습니다. 위 홈페이지 들어가셔서 원하는 폰트에 보면



  그림처럼 ->버튼이 있는 부분이 보이시죠? 이걸 누른다음에..




  내려가다보면 3번항목이 있는데, 여기서 Javascript로 삽입을 하셔야 페이지 로딩에 지장을 덜 줄 수 있습니다. 꼭 이걸로 선택하신 다음에 코드를 전체 복사 합니다.




  그다음 티스토리의 경우 위에서 복사한 스크립트를 페이지 최하단에 넣으시고, 글꼴이 적용되는 부분에서 해당 폰트를 맨 앞으로 넣으시면 됩니다. (앞으로 넣어야 우선순위가 앞서기 때문에 제대로 적용됩니다.)



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
    • 제뉴인
    • 2014.02.24 12:22 신고
    블로그 스킨 멋지네요.배포해 주셔서 감사합니다.

    나눔글꼴도 자바스크립트로 적용하는 방식이 있더라구요.링크 걸어 드리겠습니다.
    http://www.letmecompile.com/%EB%82%98%EB%88%94%EA%B3%A0%EB%94%95-%EA%B5%AC%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

    어떤 글꼴을 적용할 지는 개인적 취향이겠지만, 그냥 참고만 하시라고 알려드려요.
    • ㅎㅎ 링크 감사합니다. 스킨은 배포용으로 더 손봐야할듯 싶어요.
      나눔고딕을 js로 적용하는 것은 저도 관련포스팅을 한 적이 있습니다.
      http://blog.readiz.com/67
  1. 영어말고 한글도 같은방법으로 하면적용되는건가요~?!^^
    • 한글폰트가 있다면요 똑같죠 뭐 ㅋㅋ
    • 한글폰트가..ㅠㅁㅠ
      없드라구요...흑흑 그래서
      잠시 폰트는 내려노음을 진행중이에요 ㅎㅎ
    • fontface.kr 참고해보세요~
    • 감사합니다^ㅡ^
      공부를 좀 해봐야겠네요 :)
  2. 전 그동안 CDN 과 스타일속성으로 했었는데.. 자바스크립트 코드 사용하는게 더 좋은거군요... ㅎㅎ 오늘 첨 이글을 보게 되서 알게 됐네요 ^^
    • 비동기라서 더 강점이 있는겁니다. 로딩중에도 뜨니까요~

티스토리 툴바