[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선

평소 웹을 보면 심심치않게 웹폰트가 적용되어 있는 것을 볼 수 있습니다. 이미 널리 쓰이고 있는 중인데요. 그런데 알고 계신가요? 웹폰트의 용량은 생각보다 큽니다.
영문 폰트의 경우는 그래도 괜찮습니다. 종류도 다양하고 용량도 작습니다.

문제는 한글 웹폰트죠. 실제로 c드라이브의 폰트 폴더에 가서 확인해 보면 한글 폰트의 용량은 매우 큰 편입니다. 그 용량을 웹에서 로딩한다면...?
사이트 이용자는 속도도 그렇지만 매번 폰트 다운로드로 인한 용량 때문에 데이터에 신경을 쓸 수 밖에 없습니다.

이미지는 경량화 하는데... 폰트는..?
사실 폰트를 서버에 올려서 사용하는 방법은 그리 추천드리지 않습니다. 데스크탑의 폰트는 용량이 매우 크기 때문이지요. 몇몇분들은 폰트에서 쓸모 없는 문자들을 삭제해 경량화 시켜서 사용하기도 하시더군요.
하지만 우리에겐 구글 웹폰트가 있으니 그렇게 고생하지 않으셔도 될 듯 하네요.

웹폰트의 옳은 로딩 방법을 알리고자 몇가지 방법을 소개합니다.

1. CSS import 방식

   가장 많이 사용하는 방식일 듯 하네요. 대중적으로 알려져 있는 방법이기도 하고요. 의외로, 퍼블리셔나 웹디자이너도 이러한 방법을 꽤 사용하는 것을 목격했습니다.
   import 방식이 나쁜건 아닙니다. 하지만, 느려요. 로딩이 느립니다. (중요)
   css파일에 추가 하는 방법입니다.

   ?

   1	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

2. 웹폰트 로더 동기방식

   단순 CSS 임포트보다 더 세밀한 컨트롤을 요한다면 구글 웹폰트로더(Webfont Loader) webfont.js를 이용하면 됩니다.
   다음 코드에서 WebFont.load에 보면 custom 항목아래 families, urls 가 직접 입력되어있는데요 이는 아직 나눔고딕폰트가 정식 구글 웹폰트가아닌 early access형태로 제공되고 있기 때문에, 단순히 Nanum Gothic 폰트이름만 입력해서는 제대로 동작하지 않습니다(정식 구글웹폰트의 경우는 이름만 넣어도 동작). 따라서 나눔고딕의 경우 url까지 적어줘야 제대로 작동합니다.
   early access의 제공되는 한글폰트 목록과 url을 보려면 여기로.

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script> <script type="text/javascript">   WebFont.load({        // For google fonts     google: {       families: ['Droid Sans', 'Droid Serif']     },     // For early access or custom font     custom: {         families: ['Nanum Gothic'],         urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']     }      }); </script>

3. 웹폰트 로더 비동기 로딩 방식

   웹폰트가 다운로드 되는 동안, 사이트 렌더링이 느려지는 것이 답답할 경우, 좀 더 빠른 웹폰트 로딩을 위해선 비동기 방식도 사용 가능합니다. 하지만 몇몇 특정 브라우저에선 웹폰트 로딩이 끝나면 다시한번 렌더링을 하면서 화면이 깜빡이는 현상이 나타날 수 가 있는데요, 이것을 FOUT라고 부릅니다. 그래서 상황에 따라 적절하게 사용하는 것이 중요합니다.

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <script type="text/javascript">   WebFontConfig = {     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.10/webfont.js';     wf.type = 'text/javascript';     wf.async = 'true';     var s = document.getElementsByTagName('script')[0];     s.parentNode.insertBefore(wf, s);   })();  </script>

   ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js 부분의 1.4.10 은 웹폰트로더의 버전넘버이니 필요에 따라 수정해서 사용하면 됩니다.

4. 실제 폰트 적용

   위 내용들로 로드 했을 경우, css에서 쉽게 사용이 가능합니다.

   ?

   1 2 3

   body {     font-family: "Nanum Gothic", sans-serif; }

   ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js 부분의 1.4.10 은 웹폰트로더의 버전넘버이니 필요에 따라 수정해서 사용하면 됩니다.

웹폰트를 빠르게 로드하는 방법

위에서 웹폰트를 로드하는 몇가지 방법을 살펴봤습니다. 이번에는 그 로드를 더 빠르게 하는 방법을 알아보도록 하죠.

1. Load Google Fonts First

   구글 임포트 코드를 HEAD 태그의 가장 첫번째 - CSS 화일보다 더 앞 - 에 위치시킨다. 이렇게 하면 CSS보다 먼저 폰트를 로드한다.

2. Use Link Format

   구글 웹폰트를 로딩하는 방법은 @import, 참조 링크, 자바스크립트 3가지이다. 참조 링크를 이용하면 HTML의 최상에 코드를 넣을 수 있으며, CSS 화일보다 가장 빠르게 로드할 수 있다.

   ?

   1	<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

   @import 코드는 CSS 화일 안에 넣어야한다. CSS 화일의 최상단에 넣어도 스타일되지 않은 텍스트가 번쩍거릴 수 있다.(flash of unstyled text:FOUT) 이건 방문자에게 형편없는 웹 경험이다.

3. Load Fewer Fonts

   표제를 위한 볼드 타입과 기사를 위한 가독성이 좋은 폰트 - 최대 2개의 폰트를 선정하는 것이 좋은 생각이다. 폰트를 많이 선정할수록 로딩 시간은 더 길어진다.

4. Combine Font Codes

   코드 한 줄에 여러 구글 폰트를 로드할 수 있다. 로드하려는 각 폰트마다 한 줄 코드를 넣을 필요가 없다. Open Sans와 Oswald 폰트를 결합하는 방법은 아래와 같다.

   ?

   1	<link href="http://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet" type="text/css">

5. Load Default Variants

   폰트 옵션으로 폰트를 여러가지 스타일로 로드할 수 있다. 여러 옵션으로 로딩하는 것은 여러 폰트를 로드하는 것과 똑같다. 폰트의 디폴트 스타일을 선택하면 하나의 옵션으로만 로드된다.
   
   예 - Open Sans 폰트를 기본 옵션으로 로드하면 15 로딩타임의 임팩트를 준다.
   

   

   모든 옵션을 선택하면 10배의 페이지 로드 임팩트가 증가할 것이다.

   

6. Load Faster Fonts

   구글 폰트의 페이지는 폰트가 로드하는 시간을 매우 명확히 하고 있다. 폰트 옆의 로드 측정기는 각 폰트가 얼마나 빨리 로드되는지 보여준다. 폰트를 더 많이 로드할수록 로드되는 시간은 더 길어진다.
   몇몇 폰트는 무겁고 로드 시간이 거의 두배가 걸릴 수 있다. 그러므로 빠르게 로딩되는 폰트를 현명하게 선택하라.
   예로, Open Sans는 15 페이지 임팩트이지만 Droid Sans는 25 이상이다!

7. Use Web Font Loader

   단순히 CSS가 로드되기 전에 구글 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면, 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트의 나머지가 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍되는 것을 확실하게 피해준다.
   비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기위해 동기 스크립트를 사용하는 것이 좋다.

   ?

   1 2 3 4 5 6 7 8

   <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script>   WebFont.load({     google: {       families: ['Open Sans', 'Oswald']     }   }); </script>