티스토리 블로그 나눔고딕 웹폰트 적용하는 방법

티스토리 블로그 나눔고딕 웹폰트 적용하는 방법

티스토리 블로그를 운영하는 분들에게 있어서

핫한것이 있다면 역시나 구글 웹폰트 일 것입니다.

저 역시도 그러했고 지난 포스팅에서는 구글에서 제공하는

무료 웹폰트들중 한글 폰트들의 디자인을 비교한바 있습니다.

무료폰트중 최강 구글 웹폰트 디자인 비교하기 : http://jkman001.tistory.com/416

그리고 오늘 포스팅에서는 구글 웹폰트중 나눔고딕 폰트를 티스토리 블로그에 적용하는 방법에 대해 알아보고자 합니다.

우선 티스토리 블로그에 폰트를 적용하기 위한 방법은 두가지가 있습니다.

첫번째로 폰트파일을 티스토리서버에 업로드한 뒤 적용하는 방법과,

두번째로 구글서버에에 저장된 웹폰트파일을 티스토리 스킨에서 불러와서 적용하는 방법이지요.

첫번째 방법은 폰트파일의 크기가 있어서 티스토리스킨을 저장, 백업할때 용량제한으로 불편함이 있고

블로그에 접속하는 방문자가 폰트를 다운받아야 블로그에 해당폰트로 보인다는점이 있습니다.

하지만, 폰트파일에 대한 저작권 문제가 발생할 소지가 있습니다.

반면에 두번째 방법은, 첫번째 방법에 비해 폰트를 보여주는 속도가 빠르고, 저작권문제로부터 자유롭습니다.

그럼 본격적으로 구글 웹폰트인 나눔고딕 폰트를 적용하는 방법에 대해 알아보도록 하지요.

Font name	Hanna (Korean) - 배달의민족 한나
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/hanna/v3/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/hanna/v3/download.zip
CSS Example	font-family: 'Hanna', serif;
Font name	Jeju Hallasan (Korean) - 제주한라산
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/jejuhallasan/v3/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/jejuhallasan/v3/download.zip
CSS Example	font-family: 'Jeju Hallasan', serif;
Font name	KoPub Batang (Korean) - KoPub바탕
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/kopubbatang/v3/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/kopubbatang/v3/download.zip
CSS Example	font-family: 'KoPub Batang', serif;
Font name	Nanum Gothic (Korean) - 나눔고딕
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/nanumgothic/v5/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/nanumgothic/v5/download.zip
CSS Example	font-family: 'Nanum Gothic', serif;
Font name	Nanum Myeongjo (Korean) - 나눔명조
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/nanummyeongjo/v4/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/nanummyeongjo/v4/download.zip
CSS Example	font-family: 'Nanum Myeongjo', serif;
Font name	Jeju Gothic (Korean) - 제주고딕
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/jejuhallasan/v3/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/jejuhallasan/v3/download.zip
CSS Example	font-family: 'Jeju Gothic', serif;
Font name	Jeju Myeongjo (Korean) - 제주명조
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/jejumyeongjo/v3/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/jejumyeongjo/v3/download.zip
CSS Example	font-family: 'Jeju Myeongjo', serif;
Font name	Nanum Brush Script (Korean) - 나눔손글씨 붓
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/nanumbrushscript/v4/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/nanumbrushscript/v4/download.zip
CSS Example	font-family: 'Nanum Brush Script', serif;
Font name	Nanum Gothic Coding (Korean) - 나눔고딕 코딩
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/nanumgothiccoding/v4/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/nanumgothiccoding/v4/download.zip
CSS Example	font-family: 'Nanum Gothic Coding', serif;
Font name	Nanum Pen Script (Korean) - 나눔손글씨 펜
CSS URL	@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
SIL Open Font License. 1.1	http://fonts.gstatic.com/ea/nanumpenscript/v4/OFL.txt
Font download URL	http://fonts.gstatic.com/ea/nanumpenscript/v4/download.zip
CSS Example	font-family: 'Nanum Pen Script', serif;

출처 : http://www.google.com/fonts/earlyaccess

위 표는 구글 웹폰트에서 제공하는 한글폰트들의 목록과 각 폰트별로 제공하는 CSS URL, 폰트 저작권정보, 다운로드주소, CSS 적용 예시입니다.

라이센스와 다운로드 주소의 경우 해당주소를 클릭하면 새창에서 해당페이지가 열리며 해당 정보는

구글 웹폰트 홈페이지에서 가져왔습니다. http://www.google.com/fonts/earlyaccess

티스토리 블로그에 구글 웹폰트를 적용하기 위해서는 위 정보들중에서 CSS URL 과 CSS Example 만 알고 있으면 됩니다.

티스토리 블로그 관리창에 들어간뒤에 HTML/CSS 편집 으로 들어가 줍니다.

그리고 style.css 중 아무곳에나 적용하고자 하는 웹폰트의 CSS URL  을 입력해 줍니다.

나눔고딕 폰트의 경우

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

를 입력해 주면 됩니다.

그리고 body 태그 아랫부분에  해당폰트의 CSS Example 을 입력해 주면 되는데

역시나 나눔고딕 폰트의 경우

font-family: 'Nanum Gothic', serif;

를 입력해 주면 됩니다.

그리고 저장버튼을 눌러주면, 해당 폰트로 변경된 것을 확인할 수 있습니다.

------------------------------ ps -----------------------------

webfont.txt

포스팅속 웹폰트 관련 정보는 txt 파일로 입력하여 업로드하였으니 다운받아 사용하시면 됩니다.

웹폰트 사용시에는 저작권관련내용을 확인하신뒤 사용하시는게 좋을것 같습니다.

이외의 웹폰트 적용방법은 티스토리 스킨별로 상이할 수 있는데,

저같은경우에는 style.css 내의 모든 굴림폰트를 'Nanum Gothic' 으로 변경하여 적용하였습니다.