꿈 많은 개발자가 되자! Tae-hwan

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

Programming language/Etc

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

taehwan 2012.10.31 00:45
크리에이티브 커먼즈 라이선스

Creative Commons License 이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
본문

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

 구글에서 나눔글꼴을 적용할 수 있도록 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에 적용된 폰트들을 살펴보고 원하는 폰트들을 더 많이 적용할 수도 있습니다.



개인 광고 영역
9 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 8 9 Next