티스토리 블로그 폰트 변경하기

1. 폰트 업로드

웹폰트 사용을 위해 사용하고자 하는 폰트를 업로드한다. 업로드 하는 방법은 관리자 페이지에서 ‘HTML/CSS 편집 메뉴’ 를 선택한다. 해당 메뉴를 선택하면 HTML과 CSS 파일을 수정할 수 있는 메뉴가 보이고 그 옆에 파일업로드 메뉴가 보인다. 파일업로드 메뉴를 통해 이미지를 업로드해서 사용할 수도 있는데 본문에서는 폰트 파일을 업로드하여 사용한다. 웹폰트 파일은 확장자가 eot 이다. ttf 파일을 eot 파일로 변경하고 싶다면 다음 링크를 참고하기 바란다.
웹폰트를 업로드하면 업로드 파일 목록에 ‘images/폰트.eot’ 파일이 업로드 된 것을 확인 할 수 있다.

2. 폰트 적용

새로 업로드한 폰트를 적용하기 위해 style.css 파일을 수정한다. style.css 파일 제일 위 쪽에 다음과 같은 소스를 추가한다.

@font-face {font-family:폰트이름; src:url(폰트위치);};
body{font-family:폰트이름; font-size: 12px;}
div{font-family:폰트이름; font-size: 12px;}

예시)
@font-face {font-family:lexi; src:url(images/LexiSaebomR.eot);};
body{font-family:lexi; font-size: 12px;}
div{font-family:lexi; font-size: 12px;}

위 과정은 앞으로 사용하게 될 폰트를 선언한 것이라 볼 수 있다. 폰트를 선언 하였으므로 다른 곳에서 해당 폰트를 사용할 때는 적용하고자 하는 곳에 폰트를 설정한다.

필자는 포스팅 글 본문에 새로운 폰트를 적용하려고 article 을 수정하였다.

수정 예)
.article{
 margin:15px 0;
 font:/*@post-body-font-size=*/15px/*@*/ /*@post-body-font-family=*/lexi/*@*/;
 line-height:180%;
 color:/*@post-body-color=*/#555/*@*/;
 text-align:justify;
}

3. IE 외 브라우저 적용

eot 웹 폰트는 IE에서만 사용가능하다. 때문에 크롬, 파이어폭스 같은 다른 브라우저는 정상적으로 폰트를 출력하지 못하는데 이를 위한 작업이 필요하다. 크롬은 기본적으로 ttf 확장자 폰트를 쓰며 파이어폭스는 woff 확장자 폰트를 사용한다. 
ttf 확장자를 woff 로 변환하기 위해선 다음 링크에 있는 프로그램을 사용한다.
마찬가지로 ttf 파일과 woff 파일을 업로드한 후 다음 스타일 코드를 적용한다.

위와 같이 설정하면 크롬이나 파이어폭스에서도 정상적으로 폰트가 출력되는 것을 확인 할 수 있다.

* 참고 사이트
http://risa9722.tistory.com/2
http://jwony416.com/tag/%EC%9B%B9%ED%8F%B0%ED%8A%B8
http://thegrandblue.tistory.com/168