Typekit 웹폰트로더 활용

최근 국내에도 웹폰트를 적용하는 사이트들이 늘고 있는데, 한글 웹폰트는 영문 웹폰트에 비해 용량이 크기 때문에 웹폰트가 다 로딩 되기 전까지 텅빈 화면이 보이는 경우가 많아서 살짝 아쉽다..

구글과 어도비가 공동 개발한 Typekit WebFontLoader를 쓰면 구글 웹폰트, Typekit 등이 유/무료로 제공하는 웹폰트는 물론이고 구글 웹폰트 Early Access(여기에는 나눔고딕 등의 한글 폰트도 있다)나 모빌리스 웹폰트(다양한 유/무료 한글 웹폰트를 제공) 같은 커스텀 웹폰트도 손쉽게 사용할 수 있다.

또한 웹폰트 로딩 상태에 따라 추가적인 처리도 할 수 있어서, 웹폰트가 로딩되는 동안 보여줄 다른 폰트를 지정하거나, 로딩 안내 메시지를 표시하는 등, 다양한 기능을 구현할 수 있다.할 수 있다.

몰라서 안쓰는지 귀찮아서 안쓰는지… 아무튼…

개인적으로, 영어는 Roboto, 한글은 나눔고딕, 소스코드는 Source Code Pro을 쓰기위해 아래의 코드를 html body 끝에 추가했다:

<!-- Typekit WebFontLoader -->
<script>
  WebFontConfig = {
    google: {
      families: ['Roboto','Source Code Pro']
    },
    custom: {
      families: ['Nanum Gothic'],
      urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css'] 
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

그리고, 웹폰트가 로딩된 후에만 해당 웹폰트를 사용하도록 아래의 코드도 추가했다:

<style>
html.wf-active * {
 font-family: "Roboto", "Nanum Gothic", sans-serif ! important;
}
html.wf-active code, html.wf-active code * {
 font-family: "Source Code Pro" ! important;
}
</style>

배가 고프니…

더 이상의 자세한 설명은 생략한다. -_-;;;