티스토리 블로그에 나눔글꼴 간편하게 적용하는법

앞선 포스트에서는 설치형 블로그 홈페이지에 나눔글꼴을 적용하기 위해 PC의 FONT폴더에 있는 TTF  트루타입의 글꼴을 EOT 웹 글꼴로 변환하는 과정을 설명했다. 웹글꼴을 나눔고딕, 맑은고딕으로 바꾸는 이유는 개인적은 취향도 있지만 남들이 보기 지루하지 않아 가독성을 높이는데 있다.

다음뷰에서 다른사람들의 블로그 글을 읽다보면, 스킨이 깔끔하고 글꼴이 시원한 블로그를 만나면 웬지 마음이 편안하고 글이 머리속에 쏙쏙들어가는 느낌을 받기도 한다. 욕심이 생겨서 내 블로그에 적용해 보려고 하면, 사실 초보자들에겐 복잡한 스킨의 HTML 소스의 구조에 자신을 잃기도한다.

글쓴이는 이런 글꼴을 적용해 보려고 사실 몇시간동안 정보를 수집하고 프로그램을 구동하는 과정에서 실패를 거듭하다가 성공했다. 여기에 설명한 과정은 초보자라도 좀더 쉽게 따라 할 수 있도록 복잡한 기술적인 설명보다는 결과를 위주로 간편하게 설명해 보았다.

지난 포스트에 설명한 글꼴변환 프로그램 EOTFAST 프로그램으로 TTF →EOT 나눔고딕 글꼴을 준비했으면 시작한다. 준비가 안되었으면  설치형 블로그 글꼴변환, EOT 파일 가장 쉽게 만드는법 여기서부터 구독후, 나눔고딕 EOT 파일을 준비후 시작하면된다.

첫번째: 티스토리 관리자 모드 → HTML/CSS편집으로 들어가서, 미리 준비한 nanum.eot 파일을 업로드해야한다. 혹시 파일변환을 제대로 못하는 사람은 아래 첨부파일을 pc에 저장후 업로드 하면된다.

nanum.eot

두번째 : EOT변환 프로그램으로 변환시킨 나눔고딕 EOT파일은, 가능한 영문으로 이름바꾸기를 하는것이 좋을것 같다. 파일탐색기로 자신의 컴퓨터에서 만들어 놓은 nanum.eot 파일을 찾아서 열기를 한다. 

세번째 : 자신의 컴퓨터에 만들어 놓았던 nanum.eot 라는 파일이 제대로 업로드 되었는지 확인해본다. 그리고 업로드된 파일을 찾아보면 image/nanum.eot 라는 주소를 가지게 된다.

네번째 : style.css 로 가서  charset "utf.8"; 소스가 있는 위에, 아래 첨부된 소스를 추가한다. 일일이 소스를 영문으로 넣기가 어려우면 첨부파일에서 복사후 그대로 붙여넣기를 하면된다. 여기서 빨간색 소스는 파일 업로드한 글꼴의 고유주소며, 파란색 소스에는 확장자명을 뺀 nanum 만 적어야한다. 

추가로 응용하자면, 만일 맑은고딕으로 바꾸고 싶어서, malgun.eot 라는 글꼴을 업로드 했다면, 빨간색글자를 malgun.eot 라고 바꾸고, 파란색 글자는 malgun 이라고 바꾸면 된다.

@font-face {font-family:nanum; src:url(images/Nanum.eot)};
body{font-family:nanum; font-size: 12px;}
div{font-family:nanum; font-size: 12px;}

CSS_Code.txt

이상과 같이 style.css 에 소스를 첨부하면 기본적으로 티스토리 스킨 기준으로 사이드바, 댓글창, 방명록등 대부분이 나눔글꼴로 바뀐다. 하지만 정작 본문 글꼴은 바뀌지 않기 때문에 다음과 같이 skin.html 에도 나눔고딕으로 설정하기 위해 약간의 소스를 첨가해야한다.

본문영역에 수정할 소스는 skin.html 의 div class="article" 라는 소스가 있다. 이소스는 구글광고를 달아본 블로거라면 익숙할것이다. 본문영역의 위쪽에 구글광고를 삽입하기위해 찾던 바로 그곳에 style="font:14px/150% nanum;"  이란 소스를 추가로 첨부한다. 혹시 업로드한 파일이 malgun 이라면 이곳역시   nanum → malgun 으로 수정해주면 된다.

skin_code.txt

여기서 font 14px는 일반적인 글자크기이며, 150%는 글간격을 설정한것으로 현재 본문영역과 비교해 보면서 취향대로 사이즈를 조정해도 된다. 이상 모든 과정을 다 진행후에는 제대로 글꼴이 적용되었는지 혹시 다른 문제는 없는지 반듯이 미리보기를 통해서 확인후 저장해야한다.

이상과같은 설정으로 티스토리 블로그에 나눔고딕 글꼴을 설정한것은 절대적인 방법은 아니며, 다른 경로로 적용하는 방법도 있겠지만, 글쓴이 위주의 설정방법이다. 여기서 적용한 방법은 골치아픈 html 소스의 복잡한 구조를 설명하기 보다는 결과를 기준으로 쉽게 설명하려 했으니 도움이 되길 바란다.

PS: 포스팅한 내용은 대한민국 사람 99%가 사용하는 인터넷익스플러 기준으로 작성되었으며, 소수의 파이어폭스, 사파리,크롬,오페라 사용자 까지는 만족하지 못합니다. 현재 글쓴이 블로그는 마이크로소프트사에서 제공하는 맑은고딕 글꼴에, 글자크기 14px, 글간격 150%로 최적화 되어 있습니다.

☞ 관련글 보기:  설치형 블로그 글꼴변환, EOT 파일 가장 쉽게 만드는법 

유익하게 보셨나요?^^ 손가락 모양을 클릭하면 추천됩니다.