구글 Web Fonts에서 제공하는 나눔글꼴을 tistory에 적용하기

 나눔고딕 글꼴은 네이버에서 제공하는 폰트입니다. 네이버에서 제공하는 라이센스에 따라서 무료로 배포가 되고 있습니다.

 구글에서 나눔글꼴을 적용할 수 있도록 Google Web fonts를 제공해주고 있습니다. Google Web fonts를 적용하면 PC에 해당 글꼴이 설치되지 않아도 적용이 가능합니다. 이를 Tistory에 적용하는 방법을 간단히 살펴보기 전에 구글 나눔글꼴 라이센스를 확인하고 넘어가겠습니다.

  http://hangeul.naver.com/index.nhn

네이버 나눔글꼴 라이센스

네이버 라이센스의 일부입니다. 나눔고딕 폰트는 유료로 재판매해서는 안된다는군요.

  http://hangeul.naver.com/index.nhn

적용가능 한 Google Web Fonts

더 많은 font는 다음 페이지로 접속하시면 됩니다.

  http://www.google.com/webfonts/earlyaccess

 네이버에서 제공하는 나눔글꼴 5개 모두 적용이 가능합니다. 적용방법은 css파일에 간단하게 적용 가능합니다. 아래와 같이 예제 코드를 모두 제공합니다.

Nanum Brush Script

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
body {
   font-family: 'Nanum Brush Script', serif;
}

Nanum Gothic

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
   font-family: 'Nanum Gothic', serif;
}

Nanum Gothic Coding

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
body {
   font-family: 'Nanum Gothic Coding', serif;
}

Nanum Myeongjo

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
body {
   font-family: 'Nanum Myeongjo', serif;
}

Nanum Pen Script

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
body {
   font-family: 'Nanum Pen Script', serif;
}

Tistory의 css에 적용

 tistory에 아래와 같이 적용 할 수 있습니다. 위에서 작성해둔 @import url(); 부분을 원하는 만큼 가져와서 아래와 같이 style.css에 적용하시면 됩니다.

 tistory에는 body에 font-family: 를 적용하는것이 아니라 아래와 같이 가장 윗 부분에있는 font-family: 에 아래와 같이 작성하시면 됩니다. 'Nanum Gothic Coding', 'Nanum Gothic', .... 원하는 나눔 글꼴을 추가하시면 됩니다.

Tistory에 적용 된 화면

 나눔 고딕 코딩이 아래와 같이 적용되었습니다. 이 글 역시 나눔 고딕 코딩이 적용되고 있습니다.

마무리

 간단하게 Google Web Fonts에서 제공하는 naver 나눔 글꼴을 적용해보았습니다. 구글의 Web Fonts에 적용된 폰트들을 살펴보고 원하는 폰트들을 더 많이 적용할 수도 있습니다.