나눔고딕 구글 웹폰트(Webfont) 사용하기

한글 웹사이트의 경우 브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 웹사이트 제작시 디자이너-개발자-웹사이트디자인 의뢰인 간에 폰트를 이미지화 해서 쓸 것인지 항상 말이 많다. 영어폰트같은 경우에는 용량이 작아서 부담없이 여러 폰트들을 웹폰트 형식으로 임포트해서 사용가능하지만, 한글폰트의경우 기본적으로 1M가 넘어가는 대용량이기 때문에 하나이상의 폰트를 웹사이트에 사용하는 것은 웹사이트 로딩속도에 치명적인 영향을 끼친다.

하지만 결국 검색엔진 최적화(SEO)와 유지보수 관리의 용이성 때문에 이미지화 시킨 텍스트보다는 실제 폰트를 이용하여 렌더링된 텍스트가 여러모로 장점이 많다. 워드프레스의 메뉴나 위젯등 대부분이 텍스트를 이용한 타이포그라피를 이용하여 만들어진 디자인이 많기때문에 원활한 활용을 위해 한글 웹폰트의 필요성이 더 커지고 있다.
최근에는 네이버에서 무료로 배포하는 나눔고딕 덕분에 폰트선택의 폭이 많이 늘어나서 상황이 많이 좋아진 편이며, 더군다나 구글 웹폰트에서 earlyaccess 형식이긴 하지만 한글폰트를 지원하기 시작했고, 여기에 나눔고딕이 포함되어 있어서 매우 편리하게 나눔고딕을 웹폰트로 사용할 수 있게 되었다.

일반 웹페이지에서 나눔고딕 웹폰트를 사용하기 위해서 다음과 같은 방법들이 있다.

1. CSS import 방식

CSS 파일에 다음 구문을 추가하면 된다.

@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까지 적어줘야 제대로 작동한다.

<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. 웹폰트 로더 비동기 로딩 방식1

웹폰트 다운로드 완료 전까지 웹사이트 렌더링이 block되어 있는것이 답답할경우, 더빠른 로딩을 위해 비동기 방식이 사용가능하다.

하지만 비동기방식을 사용할경우 특정 브라우져에서는 웹폰트가 다운로드 완료된 후 다시 웹페이지의 텍스트들을 렌더링하면서 생기는 깜빡임 현상(전문용어로 Flash of Unstyled Text, FOUT 라고 불리는듯 싶다.)이 발생하므로 상황에따라 적절하게 사용해야한다.

<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. 실제 폰트 적용

1-3번 과정을 완료한 후에는 다음과 같이 일반 폰트 변경하듯이 손쉽게 사용가능하다.

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


  1. https://github.com/typekit/webfontloader