[웹폰트 만들기] eot, woff 파일만들고 적용하기

[웹폰트 만들기] eot, woff 파일만들고 적용하기

폰트가 모든 컴퓨터에 깔려있으니까 그냥 사용해도 된다고 생각하는 경우가 있다. 폰트 저작권을 우습게 보다가는 골치아픈 저작권 분쟁에 휘말릴 수 있으니 조심하라.

한글폰트를 만들기 위해서는 2000가지가 넘는 글자를 하나하나 디자인해야하고, 하루에 하나씩 해낸다고 해도 2,000일이 소요된다. 약 5.5년이다. 다른일을 제쳐두고 만들려고 마음만 먹으면 혼자서 6개월정도면 쓸만한 폰트를 만들 수 있을 거다. 그런데, 상용가치가 있을만큼 잘 다듬어지려면 정말 많은 실험과 수정을 거쳐야한다. 개인이 하기에는 무척 벅찬일이다. 어쩔 수 없이 회사나 기업 또는 국가차원에서 제작한 폰트를 사용할 수 밖에 없다.

폰트는 다른말로 하면 글꼴이다. 국어 글꼴에는 한국어를 사용하는 사람들이 공유하는 조형미가 녹아있다. 폰트는 우리 사회에서 통용되는 미의 기준 형성하는 데에 영향을 미치고, 공공성이 강하다. 공공차원에서 좋은 글꼴 개발이 이루어져야한다는데에 동감한다. 예전에는 쓸만한 공개용 무료 폰트를 찾기가 힘들었는 데, 다행히 최근들어 일반에 무료로 공개되는 폰트가 많아졌다. 상용 무료사용이 허가된 폰트도 어렵지않게 만난다. 

한겨레결체, 코펍바탕, 함초롱체, 제주명조... 여러 폰트들을 펼쳐놓고 나름대로의 색깔을 느껴보면 재미난다. 손글씨를 쓰던 시절에 서예는 보편적인 예술활동이었다. 글을 쓰는 이의 숨결과 마음가짐이 붓끝을 타고 화선지에 맺힌다. 시작과 끝, 진행과 방향전환, 이 모든 과정에서 강약이 있고 리듬이 있다. 그래서, 그 사람의 인성이 뭍어난다. 좋은 글씨는 향기롭다. 컴퓨터로 문서를 작성하는 데 익숙해진 지금 세대들은 아마 대부분 그 깊은 맛을 모를거다. 폰트는 전략적으로 용도에 맞춰 만들어지고 많은 사람들이 공유하기 때문에, 서예와 같은 예술성은 없다. 과거 글을 쓰는 속에 숨결이 녹아있었다면, 지금은 글꼴을 고르는 행위에 그 사람의 취향이 녹아있다.

개인적으로 웹작업을 하게 되면서, 일반 트루타입 폰트를 웹폰트로 바꾸어주는 프로그램이 있다는 것을 알게 되었다. 우리 컴퓨터에 들어있는 폰트파일은 트루타입이라고 하여 ttf 확장자를 가지는 반면, 웹폰트는 eot 및woff 라는 확장자를 가지는데 이 두 형식의 파일이 모두 필요하다. 브라우저에 따라 eot가 필요한 경우도 있고 woff가 필요한 경우도 있기 때문이다. 

TTF 폰트파일에서 EOT 웹폰트파일을 만들어주는 프로그램은 => http://www.eotfast.com

TTF, OTF 폰트파일을 WOFF 웹폰트 파일로 만들어주는 프로그램은 => http://people.mozilla.org/~jkew/woff/

사용법은 각 사이트에 잘 설명되어있다. 두 프로그램 모두, 폰트파일을 프로그램실행파일 위로 드래그앤드랍하면 자동으로 폰트파일을 만들어준다. cmd 창에 exe파일을 실행해도 되지만, 도스에 익숙하지 않은 사람들은 그냥 드래그앤드랍하면 쉽다. 

다음은 서버에 font face를 지정해주는 css파일을 만들어 올리고 장착해야한다.

아래와 같은 css 파일을 만들어 올린다. 물론, xxx라고는 부분과 url은 임의로 자신에게 맞게 작성하라.

@charset "utf-8";

@font-face{

  font-family: 'xxx';

  font-style: normal;

  font-weight: normal;

  src: url('../fonts/xxx.eot'); 

  src: local('☺'), url('../fonts/xxx.woff') format('woff'), url('../fonts/xxx.ttf') format('truetype'); 

}

그런다음 이 css파일을 해당폰트를 필요로하는 html페이지로 import해주면 끝이다.

워드프레스의 경우, function.php에서 아래와 같은 function을 추가해주면, 각 페이지마다 import하지 않아도 자동으로 글로벌임포트가 되도록 설정된다.

function font_setup() {

 wp_enqueue_style('임의이름-css', 'css파일의 url 주소','','',false);

}

add_action( 'wp_enqueue_scripts', 'font_setup' );

※ 나눔고딕이 많이 유행하는데, 굴림체를 기반으로 발전시켰다는 인상을 받는다. 두 글꼴을 비교해보면 흡사한면이 많다. 그런데, 굴림체는 일제강점기에 일본인에 의해 일본서체의 느낌으로 만들어진 글꼴이다.