들어가며
티스토리 블로그의 서체를 바꾸는 방법은 크게 두 가지다. 첫째는 폰트 파일을 직접 업로드해서 바꾸는 방법인데, 번거롭고 나아가 컴퓨터에 따라 호환성 문제가 있다고 한다.1
둘째는 구글 웹폰트를 사용하는 방법이다. 이 방법은 폰트 파일을 따로 업로드 할 필요 없이, CSS 상단에 링크 하나만 추가해주면 되기 때문에 간편하고 호환성도 좋다.
구글 웹폰트는 무료이다. 대신 지원하는 폰트 숫자가 적은데,2 더 많은 폰트를 원한다면 모빌리스 웹폰트라는 유료서비스가 있다. 무료 폰트도 일부 있으나 예쁜 건 대부분 유료이고, 회원 가입도 해야 해서 뭔가 복잡하다. 따라서 개인이 가볍게 쓰기에는 구글 웹폰트가 최고다.
구글 웹폰트란?
구글 웹폰트는 구글에서 제공하는 무료 서체 서비스이다. 구글 웹폰트는 두 가지로 나뉘는데, 정식판과 베타판이 있다. 영어는 정식판이라도 미려한 게 많으나, 한국어는 정식판에서의 지원이 처참할 수준이다. 따라서 이 글에서는 베타판을 이용한다.
베타판은 ‘Early Access’라고도 부르며, 주소는 이곳이다. 보면 목록이 정말 많은데, 우리는 한글만 쓴다. Early Access가 지원하는 한글 폰트는 나눔고딕, 나눔명조, 나눔필기, 한나, 제주한라산, 제주고딕, 제주명조, Kopub 등이 있다. 예전에는 나눔고딕 하나밖에 없었는데 많이 발전된 것이다.
현재 블로그 적용 서체는 Kopub체. 한국출판인회의에서 만들었으며, 나온지 오래되었으나 특유의 깔끔한 획 처리로 예전부터 좋아하는 서체이다. 개인적으로 나눔고딕이랑 나눔명조를 싫어해서… 구글 검색으로 여러 디자이너의 평을 들어봐도, 나눔폰트는 완성도에서 좀 문제가 있다고 한다.
서체 적용의 기본
서체를 입힐 때는 제목, 메뉴 등은 sans-serif로, 본문은 serif로 디자인하는 게 좋다. 쉽게 설명하면 sans-serif는 각종 삐침 등이 없는 고딕 느낌의 서체이고, serif는 삐침이 들어가 있는 명조나 궁서 느낌의 서체이다.3 즉 제목이나 메뉴의 서체는 딱딱하게, 본문은 부드럽게 꾸미면 된다. 요새 웹폰트로 나눔 고딕이 많이 풀려서 너도나도 본문에 고딕체를 많이 쓰는데, 고딕체로 쓰인 장문의 글은 명조나 바탕체로 쓰인 글보다 눈의 피로가 심하다.
현재 본 블로그는 메뉴, 제목, 본문 가리지 않고 모두 serif체인 Kopub체로 통일되어 있다. 원칙은 위에서 언급한 대로 제목-고딕, 본문-명조지만 일단 세밀하게 설정하기가 귀찮았고, 거대 커뮤니티가 아닌 단순한 개인 블로그라 이렇게 해도 썩 괜찮아 보였기 때문이다.
웹폰트 적용하기
본격적으로 구글 웹폰트를 적용해보자. 한 가지 주의할 점은, 스킨 별로 적용법이 천차만별이라는 점이다. 블로그에 새로 폰트를 입히려고 들뜬 마음에 처음 구글링 해보면, 스킨마다 CSS가 달라서 거기에 나온 가이드대로 따라 할 수 없을 때가 대부분이다.4 이에 관해서는 밑에서 추가로 설명한다.
웹폰트 적용은 어느 홈페이지든, 블로그든 두 단계로 나뉜다. 첫 번째는 구글에서 폰트 퍼오기, 두 번째는 퍼온 폰트 예쁘게 입혀주기이다.
먼저 첫 번째부터. 예시는 Kopub체로 한다.
@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
이게 구글 웹폰트를 퍼오는 태그다. 티스토리 관리 → HTML/CSS 편집에서 CSS 최상단에 넣어주면 된다. 이로써 첫 단계는 완료인데 문제는 두 번째 단계.
font-family: 'KoPub Batang', serif;
구글 Early Access에 보면, 요렇게 무성의하게 달랑 한 줄 나와 있다. 이는, 본문 서체를 바꿀 거면 본문 영역에, 제목을 바꿀 꺼면 제목 영역에 KoPub Batang을 추가해주란 소리다.
문제는 CSS를 한 번도 다루지 않은 사람은, 마치 망망대해에서 구슬하나 찾듯이, CSS에서 어디가 본문이고 어디가 제목이고 어디가 메뉴인지 찾아내기 어렵다. 간단한 스킨은 금방 찾을 수 있으나 복잡한 스킨은 상당히 오래 걸린다. 일단, 아래의 설명은 내가 쓰고 있는 공간 스킨을 기준으로 한다.
일반적인 스킨은, .article body 등으로 따로 본문이 선언되어 있지만, 공간 스킨은 CSS 상단에서 한 번에 설정한다. 아래의 세 곳을 수정해주면, 블로그의 모든 글씨체가 Kopub 바탕체로 변한다.
html,body,input,button,textarea
{
color: #000;
font: 1em/1.65 KoPub Batang,Roboto,"Helvetica Neue",Arial,NanumBarunGothicOTF,NanumBarunGothic,"나눔바른고딕","Apple SD Gothic Neo",Dotum,"돋움",sans-serif;
}
html.wf-active,html.wf-active body,html.wf-active input,html.wf-active button,html.wf-active textarea
{
font-family: KoPub Batang,NanumBarunRoboto,Roboto,"Helvetica Neue",Arial,NanumBarunGothicOTF,NanumBarunGothic,"나눔바른고딕",NanumGothicOTF,NanumGothic,"나눔고딕","Apple SD Gothic Neo",Dotum,"돋움",sans-serif;
}.cover h1
{
font-family: 'KoPub Batang';
font-size: 20px;
font-weight: 300;
letter-spacing: 4px;
line-height: 24px;
max-height: 72px;
overflow: hidden;
}
요렇게 총 3곳에 넣어주면 된다.
공간 스킨은 이렇게 하면 되는데 그럼 다른 스킨은? 제일 확실한 방법은 스킨 제작자에게 물어보는 것이다. 여건상 그게 불가능하다면, 스스로 CSS 코드를 분석해서 알아낼 수도 있다.
CSS의 구조는 중구난방이 아니고 대부분 특정 순서로 정리되어 있는데, 예를 들어 블로그 구성이 상단/본문/하단/꼬리 이렇게 되어있으면 CSS 순서도 대충 그걸 따른다. 이걸 인지하고 차근차근 찾아보면 어디가 본문인지, 어디가 메뉴인지 감이 잡히고 거기에 웹폰트를 선언해주면 된다.
마치며
사실 이도 저도 귀찮으면 그냥 기본 서체로 써도 문제 없다. 서체는 어디까지나 껍데기일 뿐 정말 중요한 것은, 글이 얼마나 고퀄의 내용을 담고 있냐 이기 때문이다. 그리고 네이버 블로그 등 폐쇄성 쩌는 블로그는 CSS 접근이 아예 막혀있기 때문에, 매 글마다 일일이 선언해 주는 게 아닌 이상, 서체를 바꾸는 것은 불가능하다.
그러나 보기 좋은 떡이 먹기도 좋다고, 나는 네이버 카페든, 블로그든, 웹사이트든 글을 쓸 때 3가지는 항상 수정한다. 서체, 글자 크기, 그리고 줄 간격. 이 세 가지만 잘 잡혀있어도 그렇지 않은 글에 비해 가독성이 월등히 나아지기 때문이다.5
멋쟁이 블로그에서 유려한 서체가 주는 눈의 즐거움을 만끽했다면, 자신의 블로그도 서체를 바꿔보자. 어렵지 않다. 바꾼 후에는 마치 집에 도배를 새로 한 것처럼 산뜻하고 뿌듯한 기분을 느낄 수 있다. 끝.
같이보면좋은글
- 폰트 파일 확장자도 골치거리다. 어떤 확장자는 익스플로러에서 안 보이고, 어떤 확장자는 사파리에서 안 보이고… ↩
- 한국어 한정. 영어는 어마어마하게 많다. 확실히 한글 폰트가 디자인 하기 어려운듯. ↩
- 애초에 sans는 불어인데, 영어로 without이란 뜻이다. ↩
- 가이드를 쓴 사람과 동일한 스킨을 쓰지 않는 이상, CSS는 반드시 다르다. ↩
- 상황상 서체를 바꿀 수 없다면 글자 크기와 줄 간격만이라도 바꿔보자. ↩
