티스토리에 웹글꼴 적용시키는 방법

웹 서핑하다 보면 색다른 글꼴을 적용한 블로그를 많이 접한다.
부럽긴하지만 방법을 몰라 그림에 떡이었지만 한가지 방법을 찾았다.
아래에 옮겨 둔 방법을 활용해 보자.

그리고 혹 자신이 갖고 있는 ttf파일을 eot파일로 전환해야 한다면
구글에서 ttf to eot라고 쳐 보면 온라인 컨버팅싸이트가 많이 있으므로 그 중 하나를 선택해
활용하면 되겠다.
(ex: 간단한 인터페이스를 가진  http://ttf2eot.sebastiankippe.com/ 에서 전환)

아래글의 출처: http://offree.net/entry/Web-Font-wooriBatang

설치

설치하는 것은 그리 어렵지 않다. 웹 글꼴을 사용하려고 하면 font-face를 이용해서 웹 글꼴의 이름을 지정하면된다. 문제는 설치형 블로거는 웹 글꼴로 인한 일일전송량의 낭비가 너무 크다는 점이다. 따라서 필자는 블로그에 웹 글꼴을 설치한 것이 아니라 웹 글꼴은 티스토리에 올리고 블로그에서 불러와 사용하는 방법을 사용했다.

티스토리에 웹 글꼴을 설치하는 방법도 필자가 사용한 방법과 같으므로 필자가 사용한 방법을 중심으로 웹 글꼴을 설치하는 방법을 설명하겠다. 일단 설치형 블로그는 티스토리 블로그를 추가로 하나 더 가지고 있다는 것을 전제로 설명하겠다.

1. 티스토리 블로그에 우리글닷컴의 웹 글꼴(wooriBatang.eot)을 올린다. 올리는 방법은 간단하다. 글을 작성한 뒤 첨부 파일로 웹 글꼴(wooriBatang.eot)을 첨부하면 된다. 제목은 필자처럼 [우리바탕체]로 해도 되고 원하는 제목을 사용하면 된다. 글은 굳이 공개할 필요가 없으므로 비공개로 둔다.
   

2. 블로그로 접속한 뒤 올리 웹 글꼴의 주소를 확인한다. 첨부 파일에 마우스 오른쪽 단추를 클릭한 뒤 바로가기 복사 메뉴를 클릭한다.
   
   추출된 주소: http://offree.com/attachment/gk150000000000.eot    

3. 좋아하는 편집기로 블로그의 style.css 파일을 블로온 뒤 첫줄에 다음과 같은 줄을 추가한다. 텍스트 큐브라면 skin/skinname/style.css을 열면되며 skinname은 자신이 사용하고 있는 스킨의 이름이다.
   편집

   소스보기

   인쇄?

   1.@font-face {font-family: 우리바탕; src:url(웹 글꼴 주소);}

   2.예:

   3.@font-face {font-family: 우리바탕;

   4.    src:url(http://offree.com/attachment/gk150000000000.eot);}

4. CSS 파일에서 웹 글꼴을 항목에 전단계에서 정의한 웹 글꼴 이름(우리바탕)을 추가한다. 당연한 얘기지만 가장 앞에 추가해야 한다. 보통 글꼴의 설정은 font, font-family에 하기 때문에 이 항목만 바꾸면 된다.
   편집

   소스보기

   인쇄?

   1.font :10pt Gulim,Tahoma,Arial,sans-serif;

   2.font-family: Gulim,Tahoma,Arial,sans-serif;

   3.예:

   4.font :10pt 우리바탕,Gulim,Tahoma,Arial,sans-serif;

   5.font-family: 우리바탕,Gulim,Tahoma,Arial,sans-serif;

사용

필자가 블로그에서 사용하고 있는 우리바탕체는 10pt에 최적화되어 있으면 줄간은 18pt가 가장 좋다고 한다. 일반적으로 CSS에서 글꼴의 크기를 표시할 때에는 pt와 px가 가능하다. px는 픽셀 단위로 주로 화면글꼴을 표시할 때 많이 사용되며, pt는 포인트로 주로 인쇄글꼴을 표시할 때 많이 사용된다. 중요한 것은 10px에 비해 10pt가 조금 더 큰 글꼴이라는 점이다. 경우에 따라 다르지만 13px 정도가 되어야 10pt와 비슷해진다.

많은 블로그들이 줄간격을 적용하지 않거나 줄간격을 적용해도 또 논문처럼 200%를 사용하는 곳이 많다. 그러나 적당한 줄간격은 글꼴에 따라 다르지만 보통 160~180%를 사용한다. 우리바탕은 정사각형이 아니라 직사각형을 사용하기 때문 18pt, 180%를 사용한다. 따라서 이 기준에 맞추어 font-size나 font에서 글꼴의 크기를 바꾸면 된다.

마지막으로 사용하는 스킨에 따라 style.css를 바꿔도 댓글의 방문자 이름은 바뀌지 않을 수 있다. 만약 style.css를 모두 바꿔도 댓글의 방문자 이름이 바뀌지 않는다면 style.css 파일의 마지막에 다음처럼 댓글 방문자 이름에 대한 클래스 정의를 추가하면 된다.

추가

소스보기

인쇄?

1.#fn {}

2.    .nickname {font-size: 10pt}

아직까지 우리나라에서는 굴림이 기본 서체로 일반적으로 사용된다. 따라서 필자의 블로그처럼 기본 서체가 아닌 웹 글꼴을 사용하는 것이 얼마나 효과적일지는 아직도 의문이다. 그러나 필자가 지금까지 봐온 우리바탕체는 다른 글꼴 보다는 훨씬 가독성이 좋았다. 따라서 방문자의 반응을 본 뒤 블로그의 기본 서체를 우리바탕체로 할지 아니면 다시 굴림으로 바꿀지 결정할 생각이다.