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