윈도우즈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으로 외부에서 불러들여지는 댓글란 부분은 여전히 굴림체가 보이지만, 여기까지 손대는 건 오버같고 해서 그냥 두기로 했습니다.
앞으로 보다 편안한 글씨체로 만나 뵙겠습니다. ^^
도움이 많이 되었습니다. 안그래도 포스트 타이틀에 영자는 너무 예쁜데 한글폰트가 마음에 안들었거든요.
답글삭제폰트 기본 사이즈부터가 다르네요. 나눔바른고딕도 적용되면 너무 좋겠는데...나눔고딕으로 만족해야겠습니다.
나눔고딕도 아직 정식 릴리즈에 포함되지 않았으니까요. 차차 되겠지요.
삭제안녕하세요. 검색하다가 우연히 이 글을 보게 되었는데 잘 사용했습니다. 고맙습니다. 다만, 올려주신 내용 중에 복사해서 붙여넣기 하고 싶은 부분이 있는데 (<link 태그 및 css 부분) 우 클릭이 막혀 있어서 조금 약올랐습니다. ^^. 잘 보고 갑니다~
답글삭제우클릭 부분은 저도 고민이었지만, 무단 복제해서 올리는 분들이 종종 있어서 최소한의 조치임을 양해 바랍니다. 물론 이렇게 해도 방법은 다 있지만... 대신 복사할 수 있는 링크 페이지를 본문에 남기도록 하겠습니다.
삭제감사합니다~ 잘되네요!
답글삭제블로그 새로 시작하셨네요. 좋은 성과 있길 바랍니다.
삭제