워드프레스 블로그 폰트 변경하기 (다른 언어, 다른 폰트 적용 : 영어, 일본어, 한국어)

Edited by Leun Kim

This post is also available in 日本語


알파벳 외에 다른 문자를 사용하는 워드프레스 유저가 블로그를 시작하고 나서 곧 접하게 되는 문제가 바로 폰트에 관한 문제입니다. “워드프레스 블로그 폰트 변경” 을 하려면 어떻게 해야 할까요? 만약 오직 ‘한 종류의 언어만 주로 사용하겠다’ 라고 한다면, 이 문제는 그리 어렵지 않게 해결하실 수 있을겁니다. 하지만 블로그에 동시에 여러 언어를 많이 사용하는 유저라면, 다른 언어에 다른 폰트를 적용하는 것은 필수 과제가 됩니다.
 
저는 처음 워드프레스 블로그를 시작하고 나서 한글이 굉장히 보기 좋지 않다고 느꼈기 때문에, 블로그 전체에 나눔바른고딕체를 적용해 보았습니다. 한글은 예쁘게 나와 주었지만, 이번에는 영어가 볼품없게 나와 버리는 문제가 생겼습니다.
 
그래서 이 포스트에서는 매우 간단한 트릭을 이용해서 자신의 워드프레스 블로그에 “다른 언어”에 “다른 폰트”(여기서는 영어, 일본어, 한국어)를 적용하는 방법을 소개하겠습니다.
 
먼저 준비해야 할 것은 폰트입니다. 어떤 형태의 폰트라도 좋으나 무난한 WOFF폰트 3개를 준비합니다. 저는 영어의 경우 Helvetica, 일본어의 경우 mplus-1p-regular, 한국어의 경우 나눔바른고딕체를 각각 준비했습니다. 영문 폰트인 Helvetica는 따로 준비하지 않으셔도 됩니다.

(mplus-1p-regular 폰트 다운로드 : http://www.fontspace.com/m-fonts/m-1p)
(나눔바른고딕 폰트 다운로드 : http://hangeul.naver.com/2014/nanum)

 
(1) 다운 받은 폰트를 FTP client 등을 이용하여
자신의 서버 루트(다른 위치도 크게 상관 없음)에 업로드 합니다.

저의 경우에는
 
   – http://www.leunkim.com/NanumBarunGothic.woff
   – http://www.leunkim.com/mplus-1p-regular.woff
 
와 같은 경로에 업로드 하였습니다.
여기서 폰트는 WOFF(.woff) 폰트가 무난합니다.
(만약 인터넷 익스플로러 8이하까지 고려할 경우에는 .eot 폰트도 함께 사용해야 됩니다)
 
주의! 폰트 용량이 너무 크면 사이트 접속시 폰트파일을 로드하는데 시간이 오래 걸려서 사이트 속도가 느려집니다. 그래서 쓰고 싶은 폰트가 있더라도 용량이 너무 크면 적당한 선에서 타협을 보는 편이 좋습니다.
 
 
(2) 블로그의 CSS(보통 style.css) 파일을 열어 가장 첫째줄에 다음과 같은 코드를 삽입합니다.

물론 src: url( )에는 자신이 업로드한 경로를 입력하여 폰트를 로드합니다.
 
 
(3) 마지막으로 자신의 CSS(보통 style.css)에 이 폰트들을 적용시켜주면 끝이 납니다.
구체적으로는 font-family를 이용해 다음과 같이 폰트들을 배열합니다.

여기서 주의할 것은 가장 먼저 지정된 폰트 Helvetica가 한글폰트와 일본어폰트 모두를 지원하지 않는 것입니다. 이럴 경우 대부분의 브라우저들은 그 다음으로 지정된 글꼴이 저장되어 있는지 탐색하여 Helvetica가 지원하지 않는 폰트를 2번째로 지정된 폰트를 이용하여 표현하려고 노력합니다. 여기서 2번째로 지정된 폰트는 일본어를 지원하는 mplus-1p-regular 폰트이기 때문에, 영어는 Helvetica로, 일본어는 mplus-1p-regular폰트로 표현되게 됩니다. 하지만 mplus-1p-regular가 한글을 지원하지 않기 때문에 웹 브라우저는 또 다시 한글을 표현하기 위해 3번째로 지정된 폰트를 탐색합니다. 3번째로 지정한 글꼴은 나눔바른고딕이므로 비로소 남은 한국어들은 나눔바른고딕으로 표현됩니다.
 
제 블로그로 테스트 해 본 결과, Firefox, Chrome, Safari, IE9, 10 에서는 만족스러운 결과가 나와 주었습니다. 다만 IE 구 버전의 경우에는 영어는 첫 번째 지정된 Helvetica가 적용되지만, 나머지 언어들에 대해서는 윈도우 기본 글꼴이 적용되어버릴 가능성이 있습니다. 아래는 이 방법으로 3가지 언어에 대해 3가지 글꼴이 잘 적용된 모습입니다.

I write English with an English font.
僕は日本語は日本語のフォントで表します。
저는 한국어는 한글 폰트로 표현합니다.

 * TTF폰트를 EOT폰트로 바꾸어 주는 사이트 : http://ttf2eot.sebastiankippe.com
* TTF폰트를 WOFF폰트로 바꾸어 주는 사이트 : http://everythingfonts.com/ttf-to-woff

References.
http://yiaong.egloos.com/4760266
http://heiswed.tistory.com/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EB%82%98%EB%88%94%EA%B3%A0%EB%94%95-%EA%B8%80%EA%BC%B4-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

 

 
I was born and raised in Daegu, S. Korea. I majored in electronics and math in Seoul from 2007 to 2012. I've had a great interest in math since freshman year, and I studied PDE in Osaka, Japan from 2012-2014. I worked at a science museum and HUFS from 2014 in Seoul. Now I'm studying PDE in Tokyo, Japan. I also developed an interest in music, as I met a great piano teacher Oh in 2001, and joined an indie metal band in 2008. In my spare time, I enjoy various things, such as listening music, blogging, traveling, taking photos, and playing Go and Holdem. Please do not hesitate to contact me with comments, email, guestbook, and social medias.



3 comments