요즘 fontforge 에 대해 열심히 연구 중이다. 내가 이렇게 fontforge 에 대해 연구를 시작하기된 근본 계기는 webfont 때문이다. 일반적으로 Web Browser 를 통해 제공되는 글꼴은 이미 운영체제나 브라우저에서 지원되는 폰트만 지원한다. 일반적으로 플랫폼마다 지원하는 폰트는 대부분 다르다. 특히 한글의 경우 이 제한이 심한편이다. 예를 들어 Windows 비스타 이후 부터는 맑은고딕을 많이 사용하고 OSX(맥운영체제)에서는 애플고딕을 이용한다. 리눅스 계열에서는 은폰트를 많이 애용하는 편이다.
그러나 웹폰트를 사용하면 정해진 source 에서 폰트를 다운받아 그 폰트를 그 페이지에서 바로 적용할 수 있다. 그런데 브라우저마다 지원하는 웹폰트의 종류는 다르다. 이는 ICanUse 사이트에서 확인 할 수 있다.
TTF 폰트는 IE를 제외하고 다 지원하는 편이지만 폰트 사이즈가 조금 큰 편이며, woff 는 폰트 사이즈가 좀 작은편으로 IE8 이전버전과 안드로이드 구버전(2.3 대 )을 지원하지 않고, eot 는 IE 오래된 버전도 지원하는 편이다.
내 개인적으로는 IE8버전은 이제 버려야 할 구시대의 유물으로 생각한다. IE자체를 무시하면 좋겠지만 그래도 고래해야 한다면 IE9 부터 지원하는게 맞다고 생각한다. (Windows XP의 경우 IE8까지만 설치된다. MS가 XP를 더 이상지원하지 않지만 어째든 XP 를 쓴다면 크롬이나 Firefox 를 사용하도록 유도하느게 맞다고 생각한다. ) 안드로이드의 경우 아직 2.3 을 많이 사용하는 편이다. 그리고 4.4가 되서야 woff 가 지원된다는 것을 고려해보면 한 2018년까지는 TTF를 같이 사용해야 한다고 생각하는게 좋을 것 같다. 그래서 내 선택은 WOFF 를 기본으로 하고 안되면 TTF 를 지원하는 방식이 좋을 것 같다.
Fontforge 에서 TTF 폰트를 woff 로 변경하기 위해서는 File -> Generate Fonts... 를 선택한 후
Web font 를 선택하면 된다.
CSS 에서 웹폰트는 아래와 같이 사용할 수 있다.
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}
( https://developer.mozilla.org/ko/docs/Web/CSS/@font-face )
src 를 여러개로 할 수 있기 때문에 같은 font에 대해 다양한 font 형식을 지정할 수 있다.
==================================
<html>
<head>
<style>
@font-face {
font-family: WebNanumGothic;
src: url('/static/web_font/NanumGothic.woff') format('woff'), /* WOFF */
url('/static/web_font/NanumGothic.ttf') format('truetype'); /* TTF */
font-weight: normal;
font-style: normal;
}
.NanumGothic {font-family: WebNanumGothic;} /* 나눔고딕 */
@font-face {
font-family: WebNanumMyeongjo;
src: url('/static/web_font/NanumMyeongjo.woff') format('woff'), WOFF */
url('/static/web_font/NanumMyeongjo.ttf') format('truetype'); /* TTF */
font-weight: normal;
font-style: normal;
}
.NanumMyeongjo {font-family: WebNanumMyeongjo;} /* 나눔명조 */
div { font-size:15px; }
</style>
</head>
<body>
<div > 브라우저 기본 폰트 <br/> the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다. </div>
<br/>
<div class="NanumGothic"> NanumGothic <br/> the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다. </div>
<br/>
<div class="NanumMyeongjo"> NanumMyeongjo <br/> the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다. </div>
<br/>
</body>
</html>
===============================
위와 같이 나눔고딕과 나눔명조를 보여줍니다. 이 코드는 제가 가진 안드로이드 2.3에서도 적용됩니다. (그런데 렌더링이 살짝 다른 느낌이 들긴합니다. )
참고로 확장자마다 폰트크기가 좀 다릅니다.
NanumGothic.ttf : 4.14MB
NanumGothic.woff : 2.35MB
NanumMyeongjo.ttf : 3.63MB
NanumMyeongjo.woff : 1.29MB
입니다. WOFF 포멧에서 크기가 좀 들어 듭니다.
이렇게 저 처럼 직접 font 리소스를 변경하는 것외에 Google 이 제공하는 리소스를 이용할 수도 있습니다. 다음에는 이에 대해 정리하도록 하겠습니다.