본문 바로가기
블로그&블로깅

티스토리 폰트 바꾸는 방법

by bogosipn 2010. 2. 10.

예쁜글꼴을 다운받습니다.(보통 *.TTF파일) 찾아보면 무료폰트가 많이 있습니다.
   (단, 조선일보 폰트는 받지 마시길...사주가 친일인명사전에 등록된 '친일파'라고 하니까요ㅠㅠ)

2. TTF폰트를 웹폰트EOT 로 바꿉니다. 
index.html을 바꾸는 경우와 프로그램을 통해서 파일변환을 하는 두가지 방법이 있슴.
(저는 개인적으로 후자를 택함 - 이 블로그에 파일변환하는 방법을 설명한 글이 있슴)

3. 티스토리 관리자메뉴 ADMIN으로 들어가서 스킨편집으로 들어갑니다.
skin.html 파일에서 </head> 사이에 아래에것을 복사하여 자신의 웹폰트이름으로 바꾸어줍니다.
mj.eot는 각자 자기가 만든 웹폰트 파일명이다.
티스토리에서는 스킨 - 직접 올리기 - 파일 업로드 를 통해서 웹폰트를 업로드 할 수도 있습니다.
(웹폰트는 자동으로 /images 디렉토리로 업로됨)

<style type="text/css">
<!--
@font-face {font-family: mj; src:url(./images/mj.eot);}
a:link {font-family: mj;font-size: 9pt;}
a:visited {font-family: mj;font-size: 9pt;}
a:hover {font-family: mj;font-size: 9pt;}
a:acvite {font-family: mj;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: mj;font-size: 9pt;}
-->
</style>


4. 이제 다시 skin.html을 HTML/CSS편집으로 다음과 같이 수정합니다.
Ctrl+F(검색)를 누른 후 검색창이 뜨면 article_rep_desc" 문구를 넣어 검색합니다.
여기서 파란 부분을 추가하면 됩니다^^

오리지널 소스:
<div class="article">
      [##_article_rep_desc_##]
</div>

웹폰트를 적용하기 위한 소스:
<div class="article" style="font:9pt/150% mj;">
      [##_article_rep_desc_##]
</div>

5. 이번에는 style.css 파일을 수정합니다. 위쪽에 한줄만 넣어주면 끝^^

@font-face{font-family:mj; src:url(images/mj.eot)}