티스토리 글자체 폰트 바꾸기 - 나눔고딕을 예로

티스토리에 블로그를 만든 후 가장 큰 장점으로 느껴졌던 부분이

포스팅한 글의 글자체를 마음대로 바꿀 수 있는 점이였죠.

블로그 만든 초기에 글자체를 바꿀려고 시도를 한번 했지만

그 때는 skin.html이나 style.css에 대한 상식이 부족하여

원하는 대로 되지 않았고 실패를 했죠.

그 후 여러가지 스킨을 바꾸는 작업을 하면서

지금은 skin.html과 style.css의 문장들이

어느정도 눈에 들어오게 되었고요. 

전문가의 수준은 아니지만 필요한 것이 있으면 

관리 항목의 skin.html과 style.css에 들어가서 웬만한 거는 수정을 하죠. 

처음에 폰트 수정하는 것을 실패한 원인은 

폰트가 웹상에서 구현되는 시스템을 잘 몰랐기 때문인데요. 

대충 인터넷에서 폰트 바꾸는 방법을 찾아서 

그대로 했다가 안됐던 경우였죠. 

폰트를 바꿀려면 윈도우 상에 폰트가 깔려 있다고 구현되는 것은 아니고요.

내 블로그에 들어왔을 때 웹상에서 폰트를 구현을 해 줘야 하죠.

윈도우 상에 깔린 폰트는 응용프로그램을 실행할 때는 구현이 되지만

웹상에서는 실행이 안되는 거 같고요. 

확장자 이름도 달라 웹폰트는 .eot(embedded open type)가 붙게 되죠.

윈도상 폰트는 .ttf(true type font)로 표시되고요. 

일단은 원하는 폰트를 정하고 그것이 티스토리의 기본 폰트에 없다면 

.eot 폰트를 구해야겠죠. 

예를 들면 나눔 고딕 폰트를 원하신다면 

나눔 고딕.eot 파일을 구하시거나 아니면 웹상에 링크를 걸수 있는 곳을 찾으셔야죠. 

다행히 나눔 고딕은 공개된 파일이라 구글에서 검색을 하면 

링크 자리를 찾을 수가 있고요. 

다른 폰트들은 지적재산권 때문에 구하기가 힘든거 같고요. 

인제 나눔 고딕을 까는 방법을 알아보도록 하죠. 

두가지 방법이 있는데요.

나눔 고딕.eot 파일을 내 블로그에 업로드 시키는 방법 하나하고요. 

두번째로는 구글의 웹폰트상에 링크를 거는 방법이죠.

.eot 파일을 업로드 시키는 곳은 

관리 > 꾸미기 > HTML/CSS 편집 > 파일업로드에서 하면 되고요. 

여기서는 구글에 링크시키는 방법을 먼저 자세히 설명하죠. 

구글의 http://www.google.com/fonts/earlyaccess 로 들어가서

Ctrl F를 누르셔서 nanumgothic을 쳐서 다음 화면을 찾으시고요. 

빨간 박스의 링크 메타문구를 복사하셔서 

관리 > 꾸미기 > HTML/CSS 편집 > style.css의 제일 위에 

붙여 넣기를 하면 구글에 링크가 된거고요. 

그 다음에는 style.css 안에 들어가서 

폰트 지정부분을 전부 나눔고딕으로 바꾸어 주면 되죠. 

위 화면의 style.css에서 바로 아래에 body { } 부분의

붉은 박스 안에 있는 Nanum Gothic 을 삽입해 주면 이 블로그의 

기본서체값이 나눔 고딕으로 바뀌게 되죠. 

그 외에 별도로 서체 지정을 한 부분에 대해서는 지정 부분을 

찾아서 Nanum Gothic을 쳐넣어 주면 되요. 

대개는 Dotum이나 Gulim으로 지정되어 있기 때문에 

Ctrl F를 누르셔서 Dotum이나 Gulim을 찾아서 그 앞에 Nanum Gothic을 쳐 넣어주면 되요. 

대표적인 것 하나만 살펴보면

파란 박스 안은 Dotum으로 검색했을 때 14개가 나왔다는 거고요.

이 부분은 색깔 음영으로 표시가 되죠. 

그 중 하나를 찾아서 붉은 박스 안의 Nanum Gothic으로 쳐 넣은 모습이고요.

14군데를 스코롤 하면서 색깔 음영을 찾아서 제일 앞에 

Nanum Gothic을 넣어주면 되죠.

이 때 Nanum Gothic을 폰트 제일 앞에 넣어주셔야 해요. 

왜냐하면 순서대로 폰트가 적용되니까요. 

style.css 의 문장을 어느 정도 읽을 줄 알아야 필요한 부분, 아닌 부분을 

구분해서 폰트를 지정해 줄수가 있고요. 

처음에 잘 모를 때는 다 고치는 방법밖에는 없죠. 

이상 구글의 웹폰트에 링크시켜 폰트를 바꾸는 방법을 설명 드렸고요.

첫 번째 방법인 .eot 파일을 업로드 시켜서 하는 것도 방법은 거의 같아요.

style.css의 최상단에 아래 그림의 붉은 박스 문구만 넣어주면 되죠.

나머지 부분은 구글에 링크시키는 방법하고 똑 같죠.

폰트 사이즈는 13px로 하든지 12px로 하든지 선택하시면 되고요.

이상. 폰트 바꾸는 방법을 알아봤네요.