올바르게 웹폰트 로딩하기

§

며칠전 한글 웹폰트 로딩에 관한 질문글을 코프레스에서 답변해 드리면서 제 사이트 관련 문서를 알려드리다 보니, 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: , , ,

카테고리: ,

Ω

28 Comments

  • WordCracker says:

    좋은 정보 감사합니다.

    그런데 “비동기”라는 용어는 korBuddy님께서 알려주신 걸로 알고 있는데요. 참고로 MS 언어 포털 페이지(https://www.microsoft.com/Language/en-US/Default.aspx)에서 IT 용어를 검색해볼 수 있습니다. 마소가 IE을 엉망으로 만들어서 그렇지… 가끔 좋은 일도 하고 있습니다.(MS Language Portal을 유용하게 사용하는 번역가들이 많습니다.)

  • Enteroa says:

    좋은 정보 감사합니다 🙂
    전 그냥 woff를 다운받아 로컬에서 불러오는걸로 하곤 그랬는데 =3=a

    • Matthew says:

      방문해 주셔서 감사합니다.

      CDN 을 사용함으로 해서 bandwidth 도 줄고, 로딩속도도 빨라지니 CDN 은 사용하는 것이 좋습니다.

      특히 호스팅 관리하시는 Enteroa 님 입장에서는 고객들에게 CDN 사용을 적극 권장하셔야 하지 않을까요? 아닌가? 호스팅 provider 쪽에서는 어느쪽이 더 이득이죠? 잘모르겠습니다. ㅎㅎㅎ

      • Enteroa says:

        네트워크 상황으로만 볼때 국외 서버가 있을 경우 CDN을 권장하지만
        국내 네트워크가 정말 다른 나라 대비 상상을 초월할 정도로 빠르기 때문에
        CDN은 국내에서는 비활성화 하는게 더 빠릅니다. 한글의 폐쇠성하고도 맞물려 있다고 보고요 ‘ㅅ’a(한국내 서비스 중 사이트의 90% 이상이 한국내 접속..)

        아울러 한국에서 서비스 제공자 입장에서 트래픽 많이 발생은 = 요금 상승과 맞물려 있기 때문에 대부분 브라우져 캐쉬콘트롤 및 gzip 압축전송 조차 기본적으로 제공하지 않는 경우가 많죠 ‘ㅅ’a

        • Matthew says:

          “gzip 압축전송 조차 기본적으로 제공하지 않는 경우가 많죠”

          아… 그렇군요. ㅎㅎㅎ

          트래픽 요금 언급하시니 갑자기 이 만화가 생각났습니다.

          http://minix.tistory.com/362

          몇년전 만화인데, 한국에서 구글, 유튜브를 사용하는 사람들이 늘어날수록 왜 영세 사이트 운영자들의 트리픽 비용이 비싸질 수 밖에 없는구조인지를 알려주는 내용 입니다.

          솔직히 네이버를 욕할 내용은 아닌데, (개념을 밥말아먹은 통신사들을 까야지 왜 네이버를…) 그렇지만, 지금 상황이 얼마나 꼬여버렸는지를 잘 알려주는 내용 입니다.

          사이트 규모가 커질 수록 트래픽 비용이 감당이 안되서 해외 호스팅으로 옮기시는 사이트 운영자들이 점점 더 많이 늘고 있습니다.

          그리고 한국에서 유튜브를 사용하는 분들이 늘어날 수록 영세 사이트들의 트래픽 비용은 더 비싸질 수 밖에 없으니, 참… 기가막힐 따름입니다.

          한국은 항상 이익은 대기업이 챙기고, 피해는 소규모 사업자들, 일반인들이 고스란이 떠맡게 되는 구조 같아요. 이게 뭐가 잘못되도 상당히 잘못된게 아닐까요?

          • Enteroa says:

            정확히는 KT가 공영기업에서 민간 기업으로 넘어갈때
            망중립성 원칙에 따라 서비스 제공자가 돈을 내는 구조를 바꾸지 못한게 큰거라고 생각합니다. ‘ㅅ’a
            물론 그덕에 일반사용자는 매우 빠른 인터넷을 아주 싸게 쓰고 있기도 하니 일반 가정의 앤드유져 입장에서는 나쁜건 아니구요 ‘ㅅ’a

  • Quasar says:

    사이트 속도 개선을 위해 이 포스팅을 참고 하고있었습니다.
    현재, 영어폰트는 ftp로 서버업로드를 해서 @import로 불러오는 방법을 사용중인데,
    https://tools.pingdom.com/#!/dSel3B/https://leeyoonsil.com/
    cdn으로 불러오는 한글폰트 불러오는 속도가 1초씩 잡아먹고,

    또 cloudflare라는 https로 바꾸면서 사용한 사이트에서 wait time이 엄청 기네요.
    https부분은 무시를 해도 좋은 부분인지 뭔지도 구분이 잘 안가지만,
    폰트는 cdn인데도 불구하고 속도를 저하시키는것 같아요.;?ㅜ

  • 배선호 says:

    안녕하세요~ 웹폰트 검색하다가 오게되엇습니다.
    비동기방식으로 넣고 마지막에 해결방법
    active: function() {
    sessionStorage.fonts = true;
    }
    까지 넣게 될경우 폰트가 뭉개지면서 두꺼워지는 현상이 잇는데요
    제가 뭘 잘못한걸가요 ?

    • Matthew says:

      크롬에서만 이런 현상이 일어나는지, 아니면 모든 브라우져에서 이런 현상이 일어나는지요?

      async loading 의 문제는 아닐텐데요…

      -webkit-font-smoothing: antialiased

      는 넣으셨나요?

      크롬만 font rendering 이 다르기때문에 rendering 이 브라우져마다 어느정도 consistent 한 폰트를 사용하는 것 이외에 다른 방법은 없습니다.

      • 배선호 says:

        WebFontConfig = {
        custom: {
        families: [‘Nanum Gothic’],
        urls: [‘http://fonts.googleapis.com…]
        }
        };
        (function() {
        var wf = document.createElement(‘script’);
        wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
        ‘://ajax.googleapis.com/ajax/li…
        wf.type = ‘text/javascript’;
        wf.async = ‘true’;
        var s = document.getElementsByTagName(‘script’)[0];
        s.parentNode.insertBefore(wf, s);
        })();

        여기에서

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

        가 들어갈 위치좀 알수잇을가요?

        • Matthew says:


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

          이런식으로 config 시작 부분에요.

          • 배선호 says:

            앗 빠른답변감사합니다~~!

            한번해볼게요 감사합니다 좋은하루 되세요~ ^ ^

          • Matthew says:

            webfont.js 를 어디서 로딩하고 계세요? 저는 안보이는데요?

            bracket 도 하나 빠져 보이구요.

          • 배선호 says:

            헙…. 넣은건 이미지에 보이는게 다인데…더 추가해줄게 잇나요??
            알려주시면 안될가요 ㅠㅠ 지금 적용하는데 안되서 헤메고잇거든요ㅜ

          • 배선호 says:

            WebFontConfig = {
            active: function() {
            sessionStorage.fonts = true;
            }
            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);

            })();

            여기서 더 추가해줄게 잇나요??
            알려주시면 안될가요 ㅠㅠ 지금 적용하는데 안되서 헤메고잇거든요ㅜ

          • Matthew says:

            아.. 지금 다시보니 webfont.js 를 비동기 로딩 하시면서, font 도 FOUT 을 줄이고자 sessionStorage 에 저장하시는게 목적이시네요. 맞나요?

            일단 webfont.js 를 비동기 로딩하세요.

            그리고 난후 sessionStorage 에 폰트를 저장하세요.


            WebFontConfig = {
            active: function() {
            sessionStorage.fonts = true;
            },
            custom: {
            families: ['Nanum Gothic'],
            url: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
            }
            };

          • 배선호 says:

            빠른답변 감사합니다 ㅠㅠ 다시해볼게요 점심 맛잇게하세요 ^ ^

      • 배선호 says:

        궁금한게 잇는데요~~ 웹폰트로더 비동기방식이 빠른이유가 뭔가요 ?
        용량도 동일한 폰트를 쓰는거같은데 구글폰트 를 이용한 방법보다 빠른이유가 잇을가요? 그리고 이방법이 로컬서버에 올리는것보다 빠른가요??
        저희회사의 경우 나눔고딕을 쓰면 용량이 1메가라 과부화가 일어난다고 하더라구요…그래서 웹폰트로더방식을 쓰려고하는데 구글 한줄짜리 쓰는방식과 차이가 잇는지? 궁금합니다~~

        • Matthew says:

          async 로딩은 page rendering 을 빠르게 해주는 것 입니다. 웹폰트 자체가 빨리 로딩 되는게 아니라.

          “저희회사의 경우 나눔고딕을 쓰면 용량이 1메가라 과부화가 일어난다고 하더라구요…”

          이런경우,

          1. 서버 관리자를 조져야 합니다. 서버관리자가 나보다 더 위 계급이면 이건 불가능하지만 정말로 서버에 문제가 있는거구요.

          2. 암튼 서버 세팅을 내가 어떻게 할 수 있는게 아니라면 나눔고딕을 aync 로딩할께 아니라, 스포카 폰트를 쓰셔야 합니다.

          https://spoqa.github.io/2015/10/14/making-spoqa-han-sans.html

          예전에 Estoque 님이 이 스포카 폰트에 손을 대셔서 이 가벼운 폰트를 훨씬 더 가볍게 하나 만드셨다고 하셨었는데, ㄷㄷㄷ 이분께 사정을 한번 말씀하시면 어쩌면 제작하신 폰트를 공유해 주실지도 모르겠습니다.

          http://est0que.tistory.com/

          • 배선호 says:

            아 그렇군요.. 정말큰도움이 됫습니다~~
            바쁘실텐데 상세한 설명 정말 감사합니다 ^ ^

          • Jinhee Won says:

            안녕하세요 웹폰트 트래픽 검색하다 여기까지 왔습니다. 혹시 서버에서 폰트 관련 설정이 따로 필요한가요? 저희 회사에서도 나눔고딕 용량이 문제가 되어서 문의 드립니다.

  • 배선호 says:

    지금 확인햇네요;; 제가 스크립트를 잘 몰라서요;;

    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);
    })();

    이곳에서

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

    가 들어갈 위치가 어딘가요? 풀로 써주실수 잇을가요? ㅠ

  • 총명 says:

    감사합니다. 소개해주신 블로그에 있는 코드를 적용해보니 깜빡임이 일어나서 여러가지 방법을 찾던 중이었습니다. 덕분에 깔끔하게 해결되었습니다.

Leave a Reply to Matthew Cancel reply

Your email address will not be published. Required fields are marked *