티스토리 뷰

크리에이티브 커먼즈 라이선스
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에 적용된 폰트들을 살펴보고 원하는 폰트들을 더 많이 적용할 수도 있습니다.



개인 광고 영역


댓글
  • 프로필사진 BlogIcon Bruce Kim 안드로이드 티스토리 어플출시했습니다 ㅎㅎ^^ 티스토리 Tistory 블로그 Blog 티스토리어플입니다. 티스토리를 풀스크린 화면으로 만나세요! 블로그포스팅 모바일로 작성하기 티스토리 어플 주소 : https://play.google.com/store/apps/details? id=air.bruce.app.tistory 좋은마켓리뷰 부탁드립니다^^ p.s) 블로그포스팅 잘보고갑니다 ㅎㅎ^^안드로이드 티스토리 어플출 시했습니다 ㅎㅎ^^ 2012.10.31 00:46 신고
  • 프로필사진 BlogIcon taehwan 웹뷰를 사용하신것 같군요! 이건 웹브라우저에서 tistory 에 들어가는 것과 차이가 없어보입니다.
    글을 읽어주셔서 감사합니다
    2012.10.31 09:39 신고
  • 프로필사진 BlogIcon SMART_IBK 저희도 블로그에 나눔고딕 폰트를 사용하고 있는데요 구글 웹폰트에 대한 내용은 정말 유익하게 잘봤습니다 ^^ 2012.10.31 12:38 신고
  • 프로필사진 BlogIcon taehwan 읽어주셔서 감사합니다^^ 2012.10.31 15:36 신고
  • 프로필사진 Bruce Kim 추가적으로 개선작업중입니다 ^^ 기대해주세요~ 2012.10.31 14:07 신고
  • 프로필사진 BlogIcon 체리픽 덕분에 폰트 잘 적용 할 수 있었던 것 같습니다. 감사합니다 ^^ 2012.12.05 01:42 신고
  • 프로필사진 BlogIcon taehwan 적용잘하셨다니 다행입니다.^^; 2012.12.05 18:11 신고
  • 프로필사진 BlogIcon Xmodulo 감사합니다. 구글웹폰트파일을 다른 웹서버에 다운받아 쓸수도 있나요? 2013.02.15 12:55 신고
  • 프로필사진 BlogIcon taehwan 구글 폰트는 아닙니다. 나눔고딕 글꼴이며. 누구나 쉽게 사용할수 있도록 구글에서 제공을 하고 있구요. 자체 개인 서버를 이용해서도 사용 하는 방법이 인터넷에 검색하시면 찾을 수 있습니다!^^;;; 2013.02.15 16:34 신고
댓글쓰기 폼