윈도우즈95가 발표되면서 같이 딸려나온 <굴림체> 폰트, 지금까지도 가장 많이 쓰이는 폰트입니다. 윈도우즈8이 나온 지금도 별다르게 지정하지 않는 경우 한글 폰트는 굴림체로 나옵니다. 오랫동안 사용해서 친숙하기는 하지만... 디자인적인 관점에서는 미흡함이 없지 않습니다. 가독성도 좀 떨어지는 편이구요.이후 윈도우즈 비스타와 함께 딸려온 <맑은고딕>이 한때 유행을 타기도 했는데, 요즘은 네이버에서 개발하고 무료로 배포하는 <나눔고딕>과 <나눔명조>가 대세인 듯 합니다. 저도 거의 모든 문서와 웹브라우저 세팅에서 나눔고딕, 나눔명조, 나눔고딕코딩 폰트를 사용하고 있습니다.
이 글에서는 구글 블로거(Blogger)에서 나눔고딕을 기본 폰트로 변경하는 법에 대해서 알아 보겠습니다. 사실 다음 블로그에서 가장 큰 불만 중 하나가 이 나눔고딕을 사용할 수 없다는 것이었습니다.
제가 사용하는 구글 블로거의 테마는 디폴트 폰트가 <Arial>입니다. Arial의 영문 폰트는 매우 아름답지만 한글은 디폴트로 굴림체가 선택됩니다. 그래서 아무런 셋팅을 하지 않은 브라우저로 제 블로그를 볼 때 아래 그림과 같이 보입니다. 이걸 <나눔고딕>으로 바꾸어 세련된 분위기로 업그레이드해 볼 겁니다. 물론 다른 폰트로 바꾸는 방법도 이를 응용하여 할 수 있습니다.
예전 웹브라우저는 PC에 설치된 폰트만 사용할 수 있었지만 요즘에는 폰트가 설치되어 있지 않는 경우 서버로부터 폰트를 내려받아 보여주는 <웹폰트>를 사용할 수 있습니다. 구글에서는 이러한 웹폰트들을 모아서 호스팅을 해주고 있습니다. 이것이 바로 <Google Fonts>라는 프로젝트인데 여러가지 엄선된 오픈소스 폰트 파일들을 호스팅하고, 이들을 웹에서 사용할 수 있는 방법을 제공합니다.
그런데 불행하게도 여기에 나눔 폰트는 없습니다. 대신 곧 서비스를 하려고 테스트 중에 있습니다. 구글에서는 Early Access라는 이름으로 개발자들이 테스트할 수 있게 사이트를 준비해 두었습니다. URL은 다음과 같습니다.
http://www.google.com/fonts/earlyaccess
아래로 내려서 찾아보면 나눔 폰트 외에도 몇몇 한글 폰트가 더 준비되고 있는 걸 볼 수 있습니다. 일단 우리의 목표는 나눔고딕 폰트이니 이에 대한 설명을 봅니다.
CSS의 @import 구문을 이용하여 나눔고딕을 사용할 수 있는 css 경로를 지정하는 방식입니다. 그런데 제 경우는 이 방식으로 하니 잘 되지 않더군요. 웹을 검색해보니 @import 구문에 대한 실패 사례도 몇몇 보이구요. 그래서 동일한 역할을 하는 <link> 태그를 이용하여 css를 불러들이기로 합니다.
블로거 설정으로 들어가서 왼쪽의 <템플릿>을 클릭합니다. 그리고 오른쪽에서 <HTML 편집>을 클릭합니다.
그러면 HTML 템플릿을 편집하는 화면이 나옵니다. 가장 윗부분에 해당하는 <head> 태그 바로 아래에 아래 그림처럼 css 로딩 구문을 넣습니다. 그러고 나서 <템플릿 저장>을 누르고 빠져 나옵니다. (아래 내용 복사는 여기)
<link rel='stylesheet' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'/>
일단 이렇게 하면 나눔고딕 폰트를 위한 css는 로딩될 겁니다. 이제 블로그 포스트의 각 요소에 대해서 나눔고딕 폰트 패밀리의 이름인 'Nanum Gothic'을 지정해야 합니다. 이는 위 설정의 템플릿에서 <맞춤설정>을 클릭하면 쉽게 할 수 있습니다.
<고급>을 선택하고 제일 아래의 <CSS 추가>를 클릭합니다. 그리고 오른쪽의 입력창에 다음과 같이 쳐 넣으면 됩니다. (아래 내용 복사는 여기)
body, h1, h2, h3, h4, a, div, input, p, span, td, label, select, textarea, iframe {
font-family: 'Nanum Gothic';
}
font-family: 'Nanum Gothic';
}
.post-body {
font-family: 'Nanum Gothic';
}
.Header .description, .Header h1 {
font-family: 'Nanum Gothic';
}
.main-inner .widget h2.date-header span {
font-family: 'Nanum Gothic';
}
h3.post-title {
font-family: 'Nanum Gothic';
}
h3.post-title a {
font-family: 'Nanum Gothic';
}
.sidebar .widget {
font-family: 'Nanum Gothic';
}
font-family: 'Nanum Gothic';
}
.Header .description, .Header h1 {
font-family: 'Nanum Gothic';
}
.main-inner .widget h2.date-header span {
font-family: 'Nanum Gothic';
}
h3.post-title {
font-family: 'Nanum Gothic';
}
h3.post-title a {
font-family: 'Nanum Gothic';
}
.sidebar .widget {
font-family: 'Nanum Gothic';
}
다 입력했으면 <블로그에 적용> 버튼을 누르면 됩니다. 이제 웹브라우저에서 블로그를 다시 불러들이면 아래 그림처럼 나눔고딕 폰트로 싹 바뀌어져 있습니다.
굴림체 보다는 훨씬 보기가 편안하죠?
물론 IFRAME으로 외부에서 불러들여지는 댓글란 부분은 여전히 굴림체가 보이지만, 여기까지 손대는 건 오버같고 해서 그냥 두기로 했습니다.
앞으로 보다 편안한 글씨체로 만나 뵙겠습니다. ^^
