올바르게 웹폰트 로딩하기

§

며칠전 한글 웹폰트 로딩에 관한 질문글을 코프레스에서 답변해 드리면서 제 사이트 관련 문서를 알려드리다 보니, 3년전쯤 작성했던 내용이라, 웹폰트 로딩하는 방식이 최신방식/가장 적절한 방식이 아님을 확인했습니다.

nanum_font

글을 쓸까 말까 생각하다, 어느분이라고 말씀드리기는 그렇지만, 어느 분 사이트도 웹폰트 로딩때문에 사이트 로딩속도가 많이 느려지고 있는걸 확인했었고, 그래서 비동기 (비동기: 워드크랙커님 덕분에 이런 유식한 말도 제가 다 쓰고 말이죠. ㅋㅋㅋ) 웹폰트 로딩방식에 관해 글을 쓰려고 하다, 일단 구글 검색을 해봤습니다.

(저는 한글로 소개된 내용이 있으면 제가 굳이 그 내용에 대해 다시 글을 쓰지 않습니다. 중복되는 내용을 쓰는거는 웹스팸이라고 해서 약간 몰상식한 행동입니다. 물론 유사한 내용의 원글이 더 검색이 잘되도록 그 원글의 SEO 를 도와주는거니 유익한 기능도 있다고 볼수도 있겠죠.)

*이게 구글과 네이버의 기술력 차이 입니다. 구글은 어느 글이 원글인지 판단을 해서 원글 우선으로 검색결과를 보여주고, 네이버는 아예 원글을 참조 정도가 아니라 ctrl+c,v 해도 베낀글 부터 보여 줍니다. ㅋㅋㅋ

구글링을 해봐도 제대로 된 내용이 검색되지 않아, (@import 를 쓰라는 글들만 계속 나오고) 에효.. 그냥 글을 써야 겠다 싶어 검색을 포기하고 브라우져 창을 닫으려다, 링크 하나가 눈에 띄어 속는셈 치고 링크를 눌러봤는데, 제대로 작성되어진 글이었습니다!!!

http://www.letmecompile.com/나눔고딕-구글-웹폰트webfont-사용하기/

(Disqus 덕분에 저 글을 찾았습니다. ㅎㅎㅎㅎ)

사이트가 정말 알차고 유익한 내용으로 가득차 있는데도 불구하고 방문자도 거의 없는 듯 하고, 1년 가까이 신규글이 올라오지 않고 있어 개인적으로 아쉽습니다.

개발관련 매우 유용한 내용들로만 꽉찬 사이트들은 이상하게 검색도 잘 안되고 활성화도 안되는 것 같습니다. (한국어 뿐만 아니라 영어 사이트도 비슷합니다.) 아마 너무 기술적인 내용들만 소개되고 있어 일반분들이 접근하기 꺼려지는지도 모르겠습니다.

한국 워드프레스 관련 사이트들만 봐도 검색 잘되는 사이트들은 잘못되거나 엉뚱한, 쓰레기 같은 내용으로 가득찬 사이트 들이 대부분인 것 같습니다. 켁. 제 사이트 얘기하는 겁니다. ㅋㅋㅋ

아니, 웹폰트 로딩하는데 왜 @import rule 을 쓰라고 하냐구요? 그게 얼마나 사이트 로딩을 느리게 만드는데!!

암튼 웹폰트 로딩에 관련된 내용은 저 렛미컴파일 사이트에 매우 잘 정리되어 있으니 살펴 보시구요, 저는 저 포스팅글에서 문제점을 제시하고 해결책은 제시하시지 않은 부분만 언급하겠습니다.

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

이런식으로 비동기로딩 하는게 가장 좋다. 그렇지만 FOUT (Flash of Unstyled Text: 폰트 스타일이 미적용되어 레이아웃이 깨지는 현상을 말하는건데, 이게 PC 에서는 짧게 보여서 큰 문제가 아니라고 생각될 수 있으나, 모바일에서는 심각한 문제 입니다.) 때문에”상황에따라 적절하게 사용해야한다.” 라고만 적혀 있습니다. 사실 FOUT 현상을 해결안하면 웹폰트는 asynchronous 로딩 하면 안됩니다.

이 FOUT 현상을 해소하는 방법은 구글의 웹폰트 로더가 제공하는 cache function (기능)을 사용하는 것 입니다.

  active: function() {
    sessionStorage.fonts = true;
  }

이렇게 config 에 폰트가 cache 되도록 적용하시면 매우 이상적인 웹폰트 로딩 방식이 완성 됩니다.

(2016년 현재로서는 그렇다는 얘기 입니다. 앞으로 몇년후면 또 어떻게 상황이 바뀌어 있을지 모르는거죠.)

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리: ,

Ω