(자료실에 'webfont(웹폰트) 애드온' 을 올리면서 써놓은 글을 재구성했습니다. )

1. 웹폰트 개념(?)

(1) 개념 : 검색해보세요;;

(2) 웹환경에서의 폰트 사용과 어려움 

- 기본적으로 인간이 정보를 얻는 수단은 언어이므로 웹 역시 '문자(텍스트)' 위주의 공간일 수 밖에 없습니다. 화면에서도 가장 중요하고 많이 보이는 부분 역시 '문자' 입니다. 이를 보기 좋게(가독성, 디자인 포함) 만드려면 다양한 글꼴이 필요한 데 여기에는 많은 어려움이 있습니다. 윈도우(가장 많이 쓰는 운영체제)에 쓸만한(한글의 경우) 기본글꼴의 수가 많지 않고, 또 운영체제가 다른 경우, 운영체제의 버전이 다른 경우, 특히 요즘의 경우 모바일 환경 등 각각 설치된 기본 글꼴이 다르므로 모든 사용자 환경에서 동일하게 보이기란 쉽지 않은 현실입니다.
 특히 한글의 경우 이 정도가 심합니다. '굴림'과 '돋움'외에는 공통적인 글꼴이 없습니다(게다가 이 두 글꼴을 비슷하지요;;). 거기다 모바일까지 고려하면 이마저도 호환이 되지를 않습니다. 

(3) 웹폰트 사용 추세

- 최근 html5, css3 도입 등으로 적극적으로 활용될 것이라 생각합니다. 다만 한글의 경우 한글의 특수성때문에 영문에 비해 글꼴 제작이 어려우며(시간, 비용 등), 폰트 용량이 현저히 크고, 무료로 제공되는 폰트가 많지 않아서 적극적으로 사용될 지에 대해서는 조금 더 지켜봐야 알 것 같습니다. 
 또 IE를 사용하는 비율이 매우 높아 (아래서 검토하겠지만) IE8 이하의 비효율적인 웹폰트 사용방식으로 인해 당분간 적극적으로 웹폰트를 사용하는 데 장애가 될 것이라 생각합니다. 

(4) 추천하는 웹폰트 (혹은 폰트)

- 나눔글꼴 : 무료로 쓸만한 한글 폰트가 없는 현실에서, 나눔글꼴이 가장(주관적입니다;;) 가독성이 좋고 모양이 아름다우며, '네이버'에서 검색화면 등을 통해 배포를 유도하고 있기 때문에 가장 사용자가 많을 것이라고 생각합니다. 홈페이지는 http://hangeul.naver.com/index.nhn 입니다. 

- 맑은 고딕 : 우선 윈도우 비스타 이상, 마이크로소프트 오피스 2007(?) 이상에 기본 글꼴입니다. 사용하는 사용자가 많을 것이라 생각됩니다. (ps. 현재(2011.05) 국내의 PC에서 비스타 이상의 사용자 비율은 30% 정도입니다.) 웹폰트로 만들어서 사용할 수 있는 지는 잘 모르겠습니다..;; 

- 한글(워드프로세스)에 내장된 글꼴 : 국내에서 '한글'이 설치되지 않은 컴퓨터는 거의 없다고 생각합니다. 이에 착안하여 굳이 웹폰트로 사용하지 않더라도 여기 내장된 글꼴을 베이스로 사이트로 만드셔도 국내 웹환경에서는 문제가 없을 거라 생각합니다. 

 

2. 브라우저별 동작방식

(1) IE8 이하

 - eot 만 지원합니다.  src 외에 최근의 font-face 다른 속성(local 등등)을 지원하지 않습니다.

 local 속성을 지원하지 않아 css에 font-face 선언만 하면 현재 사용자 pc에 설치 여부와 상관없이 무조건 읽어 오게 되어 비효율적입니다. 

(2) IE9, FF, 크롬, 사파리 

 - woff, ttf, svg을 지원합니다. ttf는 용량이 너무 커서 woff가 지원되는 현실에 비추어 이 애드온에서는 생략했습니다.

 local 속성을 지원하여 사용자 pc에 폰트가 설치 되어 있는 경우에 웹폰트를 읽지 않고, 또한 문서의 font-face로 선언된 글꼴이 사용되지 않는 경우에도 불러오지 않습니다. 매우 효율적입니다. 결국 font-face 선언해두는 것만으로 트래픽, 사용자 브라우저의 로딩 등의 부담없이 웹폰트를 사용할 수 있게 합니다. local에서 폰트의 한글명을 못 읽는 경우가 있어 폰트명을 영문과 한글명 두번 선언해야합니다. 

(3) 아이폰 : svg 파일만 지원합니다. (*아이폰3에서는 현재 woff 을 지원하지 않습니다. 아이폰4 이후의 기본 웹브라우저는 확인하지 못했습니다.)



3. 사용법

 (웹폰트애드온에 사용된 나눔글꼴을 기준으로 설명합니다.)

(1) IE8 이하를 제외한 브라우저 : IE8을 제외한 브라우저에서는 그냥 css에서 font-face 타입만 선언해두고 필요한 부분에 font-family에 아래의 정의된 명칭을 사용하시면 됩니다. ex. ng, nm, np 등등  

@font-face{font-family:ng;font-style:normal;font-weight:normal;src:local('NanumGothic'),local('나눔고딕'),url(addons/webfont/font/ng.woff) format('woff')}
@font-face{font-family:ng;font-style:normal;font-weight:bold;src:local('NanumGothic'),local('+
 '나눔고딕'),url(addons/webfont/font/ngb.woff) format('woff')}
@font-face{font-family:ngeb;font-style:normal;font-weight:normal;src:local('NanumGothic ExtraBold'),local('나눔고딕 ExtraBold'),url(/addons/webfont/font/ngeb.woff) format('woff')}
@font-face{font-family:nm;font-style:normal;font-weight:normal;src:local('NanumMyeongjo'),local('나눔명조'),url(addons/webfont/font/nm.woff) format('woff')}
@font-face{font-family:nm;font-style:normal;font-weight:bold;src:local('NanumMyeongjo'),local('나눔명조'),url(addons/webfont/font/nmb.woff) format('woff')}
@font-face{font-family:nmeb;font-style:normal;font-weight:normal;src:local('NanumMyeongjo ExtraBold'),local('나눔명조 ExtraBold'),url(addons/webfont/font/nmeb.woff) format('woff')}
@font-face{font-family:np;font-style:normal;font-weight:normal;src:local('Nanum Pen Script'),local('나눔손글씨 펜'),url(addons/webfont/font/np.woff) format('woff')}
@font-face{font-family:nb;font-style:normal;font-weight:normal;src:local('Nanum Brush Script'),local('나눔손글씨 붓'),url(addons/webfont/font/nb.woff) format('woff')}

(2) IE8 이하 
- 다음의 코드를 작성하면 무조건 폰트파일을 로딩합니다. 웹폰트 로딩하는 시간까지 약간의 딜레이가 발생합니다. (ps. 경험상 3가지를 이상 웹폰트를 사용하지 않는 것을 추천드립니다. )

@font-face{font-family:ng;font-style:normal;font-weight:normal;src:url(/addons/webfont/font/ng.eot)}
@font-face{font-family:ng;font-style:normal;font-weight:bold;src:url(/addons/webfont/font/ngb.eot)}


- 스크립트로 설치된 폰트를 검출하여 없을 시에 로딩하는 방식이 효율적으로 보입니다. 단 이 방식은 브라우저 로딩 후에 글꼴을 읽게 되는 단점이 있습니다. ps. 현재 '웹폰트애드온'이 이 방식을 사용하고 있습니다. 방식이 궁금하신 분은 이 애드온을 살펴보세요.)