티스토리 뷰
나눔고딕 글꼴은 네이버에서 제공하는 폰트입니다. 네이버에서 제공하는 라이센스에 따라서 무료로 배포가 되고 있습니다.
구글에서 나눔글꼴을 적용할 수 있도록 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에 적용된 폰트들을 살펴보고 원하는 폰트들을 더 많이 적용할 수도 있습니다.
'Programming language' 카테고리의 다른 글
HTML 5 video 코드 사용 및 jQuery로 동영상 동적 load (2) | 2012.12.03 |
---|---|
Python으로 구현한 Factory Method Pattern (0) | 2012.11.05 |
구글 Web Fonts에서 제공하는 나눔글꼴을 tistory에 적용하기 (10) | 2012.10.31 |
html 5 기반의 음성입력 Speech Input 추가 (0) | 2012.09.23 |
Python Daemon 생성 예제 코드 (0) | 2012.08.19 |
Go Lang 개발을 위한 프로그램 설치 (0) | 2012.08.10 |
- TAG
- IT, 구글 Web Fonts 적용, 나눔글꼴
댓글
-
Bruce Kim 안드로이드 티스토리 어플출시했습니다 ㅎㅎ^^ 티스토리 Tistory 블로그 Blog 티스토리어플입니다. 티스토리를 풀스크린 화면으로 만나세요! 블로그포스팅 모바일로 작성하기 티스토리 어플 주소 : https://play.google.com/store/apps/details? id=air.bruce.app.tistory 좋은마켓리뷰 부탁드립니다^^ p.s) 블로그포스팅 잘보고갑니다 ㅎㅎ^^안드로이드 티스토리 어플출 시했습니다 ㅎㅎ^^ 2012.10.31 00:46 신고
-
taehwan 웹뷰를 사용하신것 같군요! 이건 웹브라우저에서 tistory 에 들어가는 것과 차이가 없어보입니다.
글을 읽어주셔서 감사합니다 2012.10.31 09:39 신고 -
SMART_IBK 저희도 블로그에 나눔고딕 폰트를 사용하고 있는데요 구글 웹폰트에 대한 내용은 정말 유익하게 잘봤습니다 ^^ 2012.10.31 12:38 신고
-
taehwan 읽어주셔서 감사합니다^^ 2012.10.31 15:36 신고
-
Bruce Kim 추가적으로 개선작업중입니다 ^^ 기대해주세요~ 2012.10.31 14:07
-
체리픽 덕분에 폰트 잘 적용 할 수 있었던 것 같습니다. 감사합니다 ^^ 2012.12.05 01:42 신고
-
taehwan 적용잘하셨다니 다행입니다.^^; 2012.12.05 18:11 신고
-
Xmodulo 감사합니다. 구글웹폰트파일을 다른 웹서버에 다운받아 쓸수도 있나요? 2013.02.15 12:55
-
taehwan 구글 폰트는 아닙니다. 나눔고딕 글꼴이며. 누구나 쉽게 사용할수 있도록 구글에서 제공을 하고 있구요. 자체 개인 서버를 이용해서도 사용 하는 방법이 인터넷에 검색하시면 찾을 수 있습니다!^^;;; 2013.02.15 16:34 신고
-
Cacka IMae 바퀴의 블로그Software Hardware Game Technology
https://roachsblog.tistory.com/
어떤폰트 알고싶어용 알려주세용 ㅎ 2020.02.25 11:35 신고