구글 웹폰트는 https://www.google.com/fonts 에서 폰트를 선택하면 CSS 소스까지 제공한다. 브라우저에서 접근하는 사용자는 구글 웹폰트 사이트에서 폰트 리소스를 다운받아 적용하게 된다. 해당 사이트에서 폰트를 선택한 후, USE 버튼을 누르면 링크해야 하는 CSS를 알려준다. 


Open Sans 와 Lobster 라는 2개의 폰트를 선택해 보았다. 

==========================================

<html>

<head>


<link href='http://fonts.googleapis.com/css?family=Open+Sans|Lobster' rel='stylesheet' type='text/css'>

<style>

.OpenSan { font-family: 'Open Sans', sans-serif; }

.Lobster { font-family: 'Lobster', cursive; }

</style>

</head>

<body>



<div >  브라우저 기본 폰트 <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div> 

<br/>

 


<div class="OpenSan">  OpenSan <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div>

<br/>


<div class="Lobster">  Lobster <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div>

<br/>


</body>

</html>

==========================================

이렇게 샘플을 만들면 아래와 같이 나온다. 




그런데 중요한 것은 이 중 한글폰트는 없다. 위 스크린샷에서 한글도 뭔가 변경되어서 나온 이유는 한글에서는 궁서로 대체해서 표시되었기 때문에다. 이는 크롬의 개발자 도구에서 확인 할 수 있다. 개발자도구에서 실제 Rendering 된 Font를 표시해 준다. 



근데 왜 하필 궁서인가?? 요건 아직 나도 모르겠다. 뭔가 더 알아봐야 겠으나 우선은 패스 하겠다. 


 

 어째든 그럼 한글은 이런 서비스를 전혀 이용하지 못하는 것인가? 아니다 구글에서 제공하는 earlyaccess 라는 서비스를 이용할 경우 가능하다. 

http://www.google.com/fonts/earlyaccess 

이름부터 뭔가 베타 느낌이 나는 서비스인데 여기서는 한글도 지원하고 있다. 우리가 익히 알고 있는 나눔글꼴과 KoPub Batang ( http://ko.wikipedia.org/wiki/KoPub 에서 보면 한국출판인회의에서 배포하는 전자책용 서체라고 나와있다. ) , 제주폰트를 지원하고 있다. 


 폰트에도 라이센스가 있기 때문에 아무 폰트나 지원할 수 없다. 그래서 오픈 폰트 라이선스(http://ko.wikipedia.org/wiki/%EC%98%A4%ED%94%88_%ED%8F%B0%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4) 를 가진 폰트만 제공하고 있다. 



제주고딕과 나눔고딕에 대해 테스트 해보았다. 

=========================================

<html>

<head>


<style>

@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

.JejuGothic { font-family: 'Jeju Gothic', serif; }


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.NanumGothic { font-family: 'Nanum Gothic', sans-serif; }

</style>

</head>

<body>


<div >  브라우저 기본 폰트 <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div><br/><br/>

<div class="JejuGothic">  JejuGothic <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div><br/><br/>

<div class="NanumGothic">  NanumGothic <br/>  the quick brown fox jumps over the lazy dog <br/> 무궁화꽃이 피었습니다.  </div><br/><br/>


</body>

</html>

=========================================




아무래도 한글의 경우 자유롭게 사용할 수 있는 폰트가 적다보니 뭔가 아쉬움이 느껴진다. 좀 더 많은 오픈폰트라이센스를 가진 한글폰트가 많아 졌으면 좋을 것 같다. 내가 fontforge 를 배우는 가장 근본 이유는 이것 때문인지도 모르겠다. 




 요즘 fontforge 에 대해 열심히 연구 중이다. 내가 이렇게 fontforge 에 대해 연구를 시작하기된 근본 계기는 webfont 때문이다. 일반적으로 Web Browser 를 통해 제공되는 글꼴은 이미 운영체제나 브라우저에서 지원되는 폰트만 지원한다. 일반적으로 플랫폼마다 지원하는 폰트는 대부분 다르다. 특히 한글의 경우 이 제한이 심한편이다. 예를 들어  Windows 비스타 이후 부터는 맑은고딕을 많이 사용하고 OSX(맥운영체제)에서는 애플고딕을 이용한다. 리눅스 계열에서는 은폰트를 많이 애용하는 편이다. 

그러나 웹폰트를 사용하면 정해진 source 에서 폰트를 다운받아 그 폰트를 그 페이지에서 바로 적용할 수 있다. 그런데 브라우저마다 지원하는 웹폰트의 종류는 다르다. 이는 ICanUse 사이트에서 확인 할 수 있다. 


http://caniuse.com/ttf  

http://caniuse.com/woff

http://caniuse.com/eot

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 이 제공하는 리소스를 이용할 수도 있습니다. 다음에는 이에 대해 정리하도록 하겠습니다. 





 지난 번에 fontforge 에 대해 소개했다. 나에 목적은 한글 폰트를 light 하게 만드는게 우선적인 목적이다. 그런데 글자(glyph) 하나하나 수정한다면 참 귀찮은 일이다. 이런일을 위해 fontforge 는 Python 을 지원한다. 

 이 파이썬을 하는 방법이 fontforge 파이썬 라이브러리를 설치하거 bin\fontforge.exe -script test.py 처럼 파이썬 파일을 옵션으로 fontforge 프로그램을 실행하거나  fontforge 가 실행된 상태에서 파이썬 스크립트를 입력해서 실행하는 방법이다. fontforge 파이썬 라이브러리를 설치하는 방법은 리눅스에서는 참 편한데, 윈도우즈에서는 시도해야 할 것이 너무 많다. 잘못하면 직접 라이브러리를 빌드해야 할지도 모른다. 윈도우즈에서는 라이브러리 빌드가 너무나 큰일이라서 패스 했다.

   마지막 fontforge 가 실행한 상태에서 하는 방법은 파이썬 소스를 copy & paste 해야 해서 패스하고 bin\fontforge.exe -script test.py  처럼 실행하는 방법을 사용할 생각이다.  


 이를 좀더 편리하게 하기 위해  간단한 에디터 툴을 이용하는 방법을 사용했다.


우선 내가 좋아하는 아크로 에디터(이 프로그램은 공짜 프로그램이다. 회사에서 사용해도 되는 진짜 공짜 프로그램이다.) 의 사용자 도구 옵션을 이용해서 아래와 같이 설정했다. 



중요한 부분 몇 가지 짚어 보자면,  명령어는 자신의 fontforge 실행 위치이고, 인자는 -script %FULLNAME% 로 한다. 정규 표현식은    ^  File \"(.*)\", line ([0-9]*).*$  로 하면 에러 발생히 해당 부분을 클릭하면 커서로 해당 위치를 가르키기 때문에 편리하다. 



이렇게 하면 간단하게 설정은 되지만 이 경우 디버깅이 break point 를 잡아 가면서 할 수 없다. 난 개인적으로 break point 를 잡지못하면 디버깅이 너무 불편해 한다. 로그를 남겨 가면서 확인해야 한다. 




 그래서 난  이클립스의 pydev 의 remote debugging 기능을 설정했다. 

http://pydev.org/manual_adv_remote_debugger.html

이 방법은 pydev 에서 pydev 서버를 돌리고 있다가  파이썬 소스쪽에 이 서버를 접속하도록 코딩하도록 한 후,   이 파이썬 소스를 실행하면 알아서 실시간 디버깅을 지원하는 매우 혁신적인 방법이다. Fontforge 는 embedded  python 기능을 이용하고 있는데 이 때에도 이런 remote debugging 이 가능하다. 


우선 파이썬 소스는 


import sys;

sys.path.append(r'D:\programs\eclipse_juno\plugins\org.python.pydev_3.4.1.201403181715\pysrc')

import pydevd # @UnresolvedImport


pydevd.settrace('localhost', port=5678, stdoutToServer=True, stderrToServer=True)

import fontforge  # @UnresolvedImport


print "END"


같이 구현한다. sys.path.append 되는 위치는 자신의 이클립스안 플러그인, pydev 의 pydevd.py가 존재하는 Path 이다. 이 path를 추가해주었기 때문에 pydevd 를 import 할 수 있는 것이다. 

그 후, 디버깅 서버 주소를 적어준다. 보통 port 는 5678 이고  이클립스내 pydev 를 설정하는 곳에서 변경할 수 있다. (당연히 환경설정에서 변경하면 이 port 주소도 변경해야 한다. )


 

  이제 실제로 이 파이썬 소스를 실행하기위해 이클립스의 Run->Extern Tool 기능을 이용한다. 




 위와 같이 설정하면 된다. 중요한 부분은 Location 부분에 fontforge 실행파일 전체 위치, Arguments 위치에 -script  ${selected_resource_name} 를 넣는다. 이 때상태 Run 하기 전에

우선 Debug Server 를 실행해야 한다.


Debug Perspective 를 보고 있을 때  Pydev -> Start Debug Server 를 눌러 Debug 서버를 실행한다. 그리고 나서 외부 Pydev Perspective 로 변경 후  Runs -> External Tools 메뉴 밑의 위 스크린 샷과 같이 설정한 외부 프로그램을 실행한다. 


 그러면 

pydevd.settrace('localhost', port=5678, stdoutToServer=True, stderrToServer=True) 까지 실행된 상태를 유지하고 있는다.  이 상태로 Expressions 도 사용가능하다. 



 이렇게 해서 파이썬 개발 환경 까지 완료 했다.