나눔고딕 구글 웹폰트 로더 적용하기

이전엔 구글 웹폰트를 이용해서 나눔 고딕을 적용하는 방법으로 CSS에 @import를 사용했다. 블로그에 접속 속도가 느려지는 것 같아서 다시 구글 폰트를 사용하지 않을까 했는데, 윈도우즈 피씨에서 접속할 때 폰트가 영 보기 좋지 않아서 다른 방법을 찾았다. 이곳 을 참고하여 CSS import 전에 웹폰트 로드하는 법을 적용했더니 좀 나아졌다. 아직 나눔고딕폰트가 정식 구글 웹폰트가 아닌 ealry access형태로 제공되고 있기 때문에 아래처럼 url까지 적어줘야 제대로 작동한다.

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

실제 폰트 적용은 다음과 같이 한다.

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

이 글은 2016-12-01에 작성되었습니다.