티스토리 폰트를 변경하는 방법 (ex: 나눔고딕)

티스토리 폰트를 기본 폰트가 아닌 새로운 폰트로 변경하고자 할때 2 가지 방법이 있다.

1. 폰트 파일을 스킨 업로드 메뉴의 HTML/CSS 편집 메뉴를 통해 업로드 한 후에 이를 임포트 해서 사용

2. 구글 웹 폰트등의 웹폰트 서비스를 사용

 

두 가지 방법을 차근차근 살펴보자

1. 폰트 파일을 스킨 업로드 메뉴에서 업로드 한 후에 이 폰트를 임포트 해서 사용

1-1. 변경하고자 하는 폰트를 업로드 한다. 여기에서는 무료 폰트는 나눔 고딕(NanumGothic.eot) 파일을 예로 들겠다.

업로드하는 방법은 "꾸미기-HTML/CSS 편집" 메뉴에서 "파일업로드" 탭을 선택한 후에 파일을 추가해서 업로드 한다.

1-2. style.css 파일 수정

아래와 같이 style.css 파일의 가장 위에 글꼴 파일을 임포트 해 준다. 아래처럼 적어주면 된다.

@font-face {font-family:나눔고딕; src:url(images/NanumGothic.eot)};
body{font-family:나눔고딕; font-size: 13px;}
div{font-family:나눔고딕; font-size: 13px;}

마지막으로, style.css 파일 중에서 font 혹은 font-family 항목 (이 값은 스킨마다 조금씩 다르다. 보통 body { 에서 찾는다) 을 찾아서 해당 내용의 font 를 Nanum Gothic 을 사용하겠다고 추가해 준다. 예를 들면 아래와 같다.

/* 본문 공통 */

body{
  font:11px/18px Nanum Gothic, Dotum, Tahoma, Verdana, AppleGothic, Sans-serif;
  color:#333;
  line-height:18px;
  padding:0px;
  margin:0px;

이렇게 한 후에 저장을 하면 된다.

 

2. 구글 웹 폰트를 엑세스 해서 사용

구글에서는 인터넷 상에 공개된 공유 폰트들의 정보를 무료로 공개하고 있으므로 이 폰트 정보를 읽어와서 웹 브라우저 상에서 보여주는 기법도 가능하다. 개인적으로는 이 방식을 추천한다.

2-1. 우선 폰트 정보를 추가한다. style.css 의 가장 윗줄에 아래와 같이 한줄을 추가한다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

 

2-2. 1-1 과 마찬가지로 body{ 로 시작하는 font 혹은 font-family 항목에서 Nanum Gothic 이란 폰트를 추가하면 폰트가 변경된다.

단, 필자의 경우 본문 내에 애드센스를 달아서인지 본문 폰트 변경이 제대로 되지 않았다. 인터넷을 보면 폰트 적용이 안된다는 이야기를 종종 볼 수 있는데 아마 스킨 중에 본문의 폰트를 별도로 지정하는 코드가 들어간 스킨들의 경우 문제가 되는 것 같다.

그래서 필자의 경우 skin.html 코드를 추가로 수정해서 문제를 해결했다.

skin.html 항목을 보면 "[## _article_rep_desc_ ##]" 라는 항목이 있는 이 코드가 있는 부분이 본문의 게시글이 표시되는 부분이다.

대부분의 스킨에서 아래와 같이 표시된다.

<div class="article">
[## _article_rep_desc_ ##]
< /div>

이 부분에 직접 본문 폰트를 설정하면 된다. 예를 들면 아래와 같이 고쳐보자

// 본문 폰트크기 조절 

<div class="article" style="font:14px/150% Nanum Gothic; color:#000; letter-spacing: 10%;">

[## _article_rep_desc_ ##]

</div>

- 설정항목
font : 폰트 사이즈 / 뒤의 % 는 줄간 간격 
nanum : 설정 폰트 
color : 폰트 색깔
letter-spacing : 글자간 간격 

개인적으로는 2 번의 방법(웹폰트 서비스를 사용) 을 선호한다. 이유는 직접 폰트 파일을 티스토리 서버에 올린 후에 폰트를 적용하는 1번의 방식은 일부 브라우저에서는 제대로 보이지 않는 문제가 생기기 때문이다. 이러한 문제가 생긴 원인은 브라우저 마다 보안 설정이 다르기 때문에 일부 브라우저에서 티스토리 서버의 폰트 파일을 제대로 억세스를 하지 못하기 때문이다. 게다가 쓸데없이 추가적인 폰트 파일을 티스토리 서버에 저장하지 않아서 번거롭지 않다는 소소한 장점도 있고...