구글에서 제공하는 나눔고딕 웹폰트 사용하기

홈페이지 제작시나 워드 프레스 같은 CMS 툴을 사용하다보면 영문에 최적화된 테마를 미리보기로 보고 골랐을때와 실재 적용했을때 한글폰트로 인해 예쁘게 보이지 않아 폰트를 바꿀 수 있는 방법을 찾게 됩니다.

웹에서는 한글이나 MS워드 프로그램처럼 PC에 설치된 폰트를 마음대로 적용할수가 없는데 이때 사용할 수 있는 방법이 두가지가 있습니다.

하나, 폰트를 이미지로 작업해서 올린다.

둘, 원하는 폰트를 웹폰트로 만들어 CSS에서 적용하여 사용한다.

첫번째 방법은 원하는 모든 폰트를 웹에서 사용가능하지만 텍스트 대신 이미지 텍스트로 모두 도배할 수도 없고(성능이나 접근성 측면에서도 권장하지 않습니다) 또한 사용전에 저작권을 미리 확인 하여 사용해야 하는 이슈도 있습니다.

두번째 방법은 웹폰트를 만들거나 이미 만들어진 웹폰트 파일을 (woff / eot 폰트) 파일을 웹서버에 올리고 CSS를 통해 호출해서 사용하는 방법입니다.

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하게 됩니다. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

예를 들어 나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 웹 서버에 올라가 있어야 합니다.
아래 파일 중에 최소 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요.

NanumGothic.woff(982KB)
NanumGothic.eot(745KB)
NanumGothic.ttf(2.23MB)   < ttf형태의 트루타입 폰트도 사용가능하지만 용량을 보시면 2메가가 넘는 크기죠 따라서 웹용으로 사용하기는 권장하진 않습니다.

woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다.

그리고 eot(Embeded Open Type) 포멧은 IE 6~8 브라우저가 지원하지만 다른 브라우저들은 eot 포멧을 지원하지 않습니다. 따라서 모든 브라우저에서 동일한 글꼴을 보이게 하려면 브라우저 호환성을 확보하기위해 woff, eot 포멧의 파일 모두 웹서버에 올려서 사용할 필요성이 있습니다.

그럼 1) 저작권 문제가 없는 2) 웹폰트로 사용가능한 공개된 폰트 중에서 3) 구글에서 웹폰트로 사용할 수 있게 제공하고 있는 네이버 나눔폰트를 WP 워드 프래스에 적용하는 방법을 알아 보겠습니다.

2013-06-04_192449

보통은 방문자의 PC에 나눔고딕 폰트가 설치되어 있어야 웹페이지에도 해당 글꼴이 제대로 표시가 되는데 이런 문제점을 해결하기 위해서 웹폰트를 서버에 올려서 폰트가 없는 사용자의 브라우저가 자동으로 폰트를 받아 이용하게 하지만 여기서는 웹서버에 폰트를 올리는 것보다 더 유연한 방법으로 구글에서 더 빠른 속도의 서버에 올려놓은 웹폰트를 사용할 수 있는 방법을 안내하려고 합니다.

> 구글에서 제공하는 모든 폰트 목록은 구글웹폰트 사이트를 방문하면 확인할 수 있습니다.

Google Web Fonts API에서는 한글 글꼴 (나눔 고딕, 나눔 명조, 나눔 펜스크립트 등)이외에도 수백 종의 라틴/그리스/키릴 문자 글꼴과 수십 종의 크메르 글자 글꼴 이외에도 한글, 라오, 아랍, 버마, 타밀 등 여러 글꼴을 early access를 통해 제공하고있습니다. 웹 폰트이므로 웹 사이트 방문자가 자신의 컴퓨터에 글꼴을 설치했는지 여부와 관계없이 사용가능합니다.

구글 웹폰트 사이트를 방문해 보면 알겠지만 상당히 많은 웹폰트를 무료로 제공하는 것은 물론 사용법 또한 매우 간단합니다. 나눔고딕 폰트를 예를 들면 아래 코드를 자신의 홈페이지에서 사용하는 CSS에 아래와 같이 추가하면 나눔고딕 웹폰트 사용을 위한 준비는 끝입니다.

워드프래스 사용자라면 테마의 style.css 파일을 열어 상단에 아래와 같이 추가해주면 나눔고딕 웹폰트 사용을 위한 준비는 완료 됩니다.

그리고 테마의 폰트를 지정해주는 css 코드를 찾아서 나눔고딕을 추가해주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
body,
button,
input,
select,
textarea {
    color: #666666;
    font-family: 'Open sans','Nanum Gothic','Malgun Gothic',Dotum,sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8;
}

위의 예는 구글에서제공하는 웹폰트들을 추가로 적용한 예이며  이렇게 원하는 곳의 폰트와 크기와 간격등을 수정하면 워드 프래스에서 아주 쉽게 웹폰트를 적용할 수 있습니다.

Advertisements