워드프레스 한글 폰트 적용 완전정복

한글 폰트워드프레스는 기본적으로 영문 폰트를 사용하기 때문에 콘텐츠가 한글인 경우에는 별로 예뻐 보이지 않습니다. 필요하다면 가독성이 높은 한글 폰트를 직접 적용해 주어야 하지요.

대표적으로 구글 웹폰트를 이용해서 한글 폰트를 적용하는 방법과 한글 폰트 사용시 알아두면 좋을 내용들을 소개해 드립니다.

폰트를 직접 업로드해서 사용하는 방법 (참고만 하세요)

홈페이지 방문자가 콘텐츠를 볼 때에는 홈페이지에서 지정한 폰트 방식으로 보여주는데, 마침 PC에 해당 폰트가 있다면 바로 보여주지만, PC에 해당 폰트가 없다면 지정한 경로에 있는 폰트를 다운로드해서 보여줍니다.

1. 한글 웹폰트 서비스 사용하기 

이렇게 직접 폰트를 업로드해서 사용하면 트래픽 많이 발생하겠지요? 그래서 자주 사용하는 폰트들을 모아놓고, 주소만 지정해서 사용할 수 있도록 하는 서비스들이 등장했습니다. 이것이 바로 “웹폰트” 이지요. 대표적인 것이 바로 구글 웹폰트(Google Webfont) 서비스인데, 아직까지는 한글을 정식으로 서비스하지 않아서 체험판 형태로만 서비스를 제공합니다. 구글 웹폰트에 앞서 국내 웹폰트 서비스를 Cufon 서비스를 소개하겠습니다.

모빌리언스 웹폰트 사용하기

모빌리언스 웹폰트는 상업용 사이트에 적용시 라이센스 비용을 지불해야 합니다 : 워드프레스 한글 폰트 5분안에 변경하기

FontFace.kr 사용하기

FontFace는 구글 웹폰트가 한글을 지원하기 전 많이 사용했던 웹폰트 서비스인데 Lunant라는 자발적인 개발자 모임에서 서비스하고 있습니다.

Cufon 사용하기

Cufon은 자바스크립트를 이용해서 글꼴을 이미지 형태로 변환시켜주는 서비스입니다. 화려한 글꼴을 제공하지만 한글 폰트와 충돌이 일어날 수도 있고, 구동 속도가 느려서 많이 사용하지는 않습니다.

2. Google WebFont 사용하기 

Google WebFont는 현재 Early Access 형태로 체험판을 제공하고, 향후 사용성이 검증되면 정식 버전으로 서비스할 예정입니다. 현재 등록된 한글 글꼴은 총 6종(나눔고딕, 나눔명조, 나눔고딕 코딩, 나눔 손글씨 붓, 나눔 손글씨 펜, 하나)이 있습니다.

1) Google WebFont 접속해서 한글 폰트 찾기

Google WebFont Early Access에 접속하고 “korean”으로 찾으면 총 6개의 한글 폰트를 찾을 수 있습니다.

한글 Google WebFont

한글 Google WebFont

2) Google WebFont URL을 CSS에 포함시키기

원하는 폰트의 주소를 @import나 <link>를 이용해서 CSS에 삽입합니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

3) Class를 사용하거나 style로 직접 적용하기

CSS의 Class를 사용하면 동일한 class를 사용하는 모든 곳에 한꺼번에 폰트를 적용할 수 있습니다.

Class를 이용하여 한글 글꼴 적용

Class를 이용하여 한글 글꼴 적용하기

또는 CSS의 style 속성을 이용해서 특정 부분만 한글 폰트를 적용할 수도 있습니다.

style을 이용하여 직접 한글 폰트 적용하기

style을 이용하여 직접 한글 폰트 적용하기

현재 Google WebFont에서 제공하는 6종의 한글 폰트를 적용해본 모습은 아래와 같습니다.

6종의 구글 웹폰트가 적용된 모습

6종의 구글 웹폰트가 적용된 모습

사용시 주의사항

  • URL 포함시, CSS 내에서는 태그를 인식하지 못하므로 @import를 사용하고, <head></head>내에 삽입할 때에는 <link>를 사용합니다. 일반적으로는 CSS 내에 @import 방식을 사용합니다.
  • 폰트 지정시 ‘Nanum Gothic' 처럼 두 단어 이상은 앞뒤로 ‘ ‘를 붙여야 하고, hanna 처럼 한 단어는 붙이지 않아도 됩니다.
  • class 방식을 사용할 때에는, 지정한다고 무조건 반영되지 않습니다. 글꼴은 CSS 우선순위(priority)에 따라 적용되므로, 때에 따라서는 CSS에 대한 기본 지식이 필요합니다.

3. 웹폰트 응용하기 

4. 폰트와 저작권 

워드프레스에서 기본적으로 제공하는 (한글/영문)폰트가 마음에 들지 않는다고 함부로 폰트를 사용하다가는 라이센스 비용을 톡톡히 물어야 할 수도 있습니다. 제공하는 폰트가 유료인지 무료인지, 무료이더라도 사용 범위에 따라 라이센스 범위가 다르지는 않은지 꼭 확인해야 합니다. 워드프레스에서만 사용한다면 Google WebFont 정도면 충분하지 않을까요?

5. 맺음말 

워드프레스 홈페이지에 한글 웹폰트를 적용하면, 폰트를 불러오는데 다소 시간이 걸릴 수 있습니다. 홈페이지의 이미지와 일반 폰트 콘텐츠가 모두 나타나고 나서 늦게 뜨기도 하고, 약간의 깜빡임을 느낄 수도 있습니다.

현재 Early Access 형태이기 때문에 정식 서비스가 되면 속도의 개선도 기대해 보지만, 어쨌든 아직까지는 방문자들에게 다소 불편함을 줄 수 있지요.

Google WebFont 서비스의 한글 폰트 로딩 속도가 개선되기 전 까지는, 꼭 필요한 경우에만 제한적으로 사용하는 것이 바람직합니다.

궁금해서 살펴보는 폰트 이야기