본문 바로가기
블로그 운영관리/방문자올리기

티스토리 블로그에 웹폰트 나눔고딕 설치하기

by 리뷰인 2011. 8. 22.

티스토리 블로그에 웹폰트 나눔고딕 설치하기

폰트설정하는데 하루가 걸렸네요 ㅋㅋ
완전 챙피합니다. 제가 이해력이 부족한지 블로그를 다 찾아봐도 그얘기가 그얘기인듯...무지한 제 잘못이죠 ㅋ

티스토리 스킨은 어느정도 완성했지만 여기저기 블로그를 방문해보니 티스토리 기본폰트가 가독성에서 현저하게 떨어지는 것을 느낄수 있었습니다. 하지만 폰트도 마찬가지로 수동설치를 해야 한다는 것에 초보자인 저에게는 큰 도전이였습니다.

블로그 폰트, 티스토리 폰트바꾸기, 티스토리 블로그 폰트 바꾸기 등 검색사이트에서 찾아봤지만 읽는거 조차도 이해하기가 상당히 어렵네요 그래서 초보 블로거가 무작정 따라할수 있는 방법을 초보자의 입장에서 포스팅해봅니다.

제가 설치할 폰트는 네이버에서 무료로 제공하는 나눔고딕입니다.



네이버 블로그와 다르게 티스토리 블로그에 지원되는 폰트는 굴림,돋움,궁서,바탕 네가지정도네요
나눔고딕을 설치하기 위해서는 약간의 소스를 삽입 및 수정을 해야 합니다.

블로그 폰트바꾸기를 찾다가 웹폰트라는 단어를 알게 되었는데 일반폰트인 TTF 가 아닌 확장명인 EOT 서체로 설치를 해야 다른 블로거들에게 나눔고딕이 보인다는 거죠~

그럼 초보자입장에서 쉽게 설치할수 있는 방법을 포스팅해보겠습니다.


1. 나눔고딕 폰트셋 다운받기

원래는 TTF를 EOT 파일로 변환시켜주는 프로그램을 사용하여 네이버에서 제공하는 폰트를 변환시켜줘야 되는데 EOT 변환파일이 많이 돌아다니는거 같아 저 역시 손쉽게 다운받아 사용할수 있었습니다.



2. HTML/CSS 편집하기

관리자페이지에서 HTML/CSS 편집페이지로 이동합니다.




3. 나눔고딕 파일업로드에 업로드하기

HTML/CSS 편집 페이지가 들어가면 파일업로드라는 공간이 있습니다.



1) 우선 파일업로드 탭을 클릭합니다.
2) 파일업로드 버튼을 클릭해서 위에서 다운받은 나눔고딕파일을 찾습니다.
3) 업로드를 시키면 images/NanumGothic.eot 파일을 확인하실수 있습니다.

이제 티스토리 블로그에 나눔고딕 파일을 삽입시키는 성공하신겁니다.^^


4. HTML/CSS 편집에서 style.css 소스수정

여기서부터 초보블로거들이 헷갈리는 부분입니다. 잘 보고 따라하시면 됩니다.

 

1) 폰트를 저장한후에 다시 HTML/CSS 편집 탭버튼을 클릭합니다.
2) skin.html 과 style.css 두곳으로 나뉘어지는데 style.css 맨위에 위그림에서 보이는 소스를 삽입해주면 됩니다.
    그대로 따라 쓰면 되는데 어려우시죠^^ 밑에 메모장을 다운받아 복사해서 삽이해주시면됩니다.


이제 블로그로 이동하면 블로그에 출력되는 폰트가 나눔고딕으로 바꿔있을 겁니다. 하지만 '여기까지 잘 따라했는데 난 왜 안바뀌냐'하는 의문을 가지는 초보블로그님들이 있을꺼예요 저도 그랬으니까요...그건 티스토리 블로그 스킨이 모드 수작업으로 폰트를 설정해 줘야 되서 그렇게 보이는 것입니다.


5. style.css 창의 폰트부분을 수정


style.css창에 보이는 소스들 천천히 보시고 font: 를 찾아 여러가지의 폰트리스트 맨앞에 nanum 이라고 추가시켜줘야 됩니다.
이 작업이 정말 힘들었습니다.^^


수정코드
font: 를 찾아 nanum 을 폰트리스트의 맨 앞에 추가시켜주세요
font-family: 를 찾아 nanum 을 폰트리스트의 맨 앞에 추가시켜주세요

예) font : Dotum, 0.75em Tahoma, Helvetica ----> 1.2em font : nanum, Dotum, 0.75em Tahoma, Helvetica

1.2em 은 폰트의 크기설정입니다. 원하는 크기를 사용하시면 됩니다.


6. HTML/CSS 편집 에서 skin.html 소스 수정하기

컨트롤+f 로 <div class="article"> 찾아  <div class="article" style="font:11pt/150% nanum;"> 로 수정하시고 블로그로 이동하면 원하는 나눔고딕 폰트로 바뀐것을 보실수 있습니다. 지금까지 나눔고딕 웹폰트 티스토리 블로그에 설치하기 포스팅이였습니다.

여기까지 고치는데 전 하루걸렸네요 ㅜㅜ 정말 이해력이 떨어지나 봐요~나이 40을 바라보고 인터넷시장에 뛰어들어서 그런지 머리가 잘 안돌아가네요 ^^ 공부해야것이 상당히 많네요~

초보블로거님들께서 도움이 되셨으면 손가락 버튼 한번만 눌러주세요 부탁드려요