[블로그] 티스토리에 나눔 글꼴 적용하는 방법

[블로그] 티스토리에 나눔 글꼴 적용하는 방법

 

환경 : Eclipse Mars, Android 4.2.2

 

네이버에서 제공하는 나눔글꼴을 일괄적으로 적용하는 방법에 대해 알아 보겠습니다. 티스토리에서 제공하는 기본 글꼴은 돋움(dotum) 입니다. 사이트 전체의 글꼴을 바꾸는 것이 아니라 아티클이 있는 본문만 변경할 것입니다.

 

▼ 사이트의 글이 변경된 나눔 글꼴로 보이고 싶다면 해당 글꼴이 있어야 겠죠. 사이트에 나눔 글꼴을 이용하기 위해 CSS 를 수정하더라도 글꼴이 없으면 소용이 없습니다. 나눔 글꼴이 설치된 컴퓨터는 변경된 폰트로 볼수 있지만 누구나 설치하는 것은 아니기 때문에 일괄 적용이 힘듭니다. 그래서 페이지가 시작될 때 마다 글꼴을 다운받는 방법을 사용하게 됩니다. 구글에서는 전세계 글꼴을 다운받을수 있도록 서버를 제공하고 있습니다. 구글이 망하지 않는 이상 이것은 유효하겠죠. 링크 주소를 클릭해서 들어가시면 아주 많은 폰트들을 볼수 있습니다. 그중에서 나눔 글꼴을 찾기 위해 [찾기] 에서 Nanum 을 입력합니다.

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

 

▼ 나눔 고딕의 CSS 주소는 아래과 같습니다. 그리고 사용을 위해 font-family 에 Nanum Gothic 이라고 입력하시면 됩니다. 페이지 시작할 때 마다 CSS 를 받기 위해 import 를 사용하였습니다.

 

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

 

CSS 문법중에 import 는 외부 CSS 를 링크할 때 쓰입니다. 나눔글꼴을 사용하기 위해 구글에서 제공하는 폰트 사이트를 링크한 것입니다. 외부 CSS 를 링크하는 방법은 두가지가 있습니다. Import 혹은 <link> 태그를 이용하는 것입니다.

 

1. style.css 에 입력할 import 문법

 

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

 

2. skin.html 에 입력할 link 문법

 

<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'>

 

두개의 사용법중에 저는 link 를 선호하는데 속도 때문입니다. 좀더 테스트를 해 봐야 겠지만 link 는 병행 다운로드가 되기 때문에 import 를 사용하는 것 보다 더 빠르게 로딩할수 있습니다. 선택은 사용자 몫으로 남기겠습니다. Style.css 에 import 값을 넣으려면 관리자 페이지로 가서 상단에 입력하고 저장합니다.

 

 

▼ Import 가 아닌 link 태그를 이용하실려면 skin.html 상단에 아래 그림과 같이 소스를 복사해서 넣습니다.

 

 

▼ 다음은 CSS 가 추가 되었으니 폰트를 화면에 적용해야 겠죠. 폰트를 적용하기 위해서Ctrl + F 단축키를 눌러 검색창에서 font-family 입력합니다. 저는 사이트 전체에 적용하는 것이 아니라 기사 본문에만 적용할 것이기 때문에 .article 클래스만 나눔고딕으로 수정하였습니다. HTML/CSS 수정이 완료되었다면 [저장] 버튼을 눌러 적용하시기 바랍니다.