1. 웹폰트란?
웹페이지를 보는 사람의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도,
임시로 글꼴을 받아 웹페이지에서 볼 수 있도록 하는 폰트의 한 종류.
2. 웹폰트는 왜 필요한가?
기본으로 제공하는 폰트 이외에 자신이 평소에 즐겨쓰는 폰트나 웹사이트에 어울리는 폰트를 원할 경우 사용.
윈도우 폰트는 .ttf 포멧 형식이고,
웹폰트는 .eot 형식으로 다르기에 윈도우 폰트를 웹에서 직접 사용하는 것은 안되며,
.eot 형식으로 변환을 해야 웹에서 사용 가능.
3. 웹폰트의 종류
기본적으로 시스템에서 사용중인 TrueType과 OpenType은 생략.
우리가 흔히 적용하는 폰트는 .eot, woff, svg 로 나뉨.
- eot (Embedded Open Type)
익스플로러가 지원하는 폰트로 버전 8 이하에서 사용.
- woff (Web Open Font Format)
2010년 W3C에 의해 초안이 나온 포맷 - 크롬 3.6이상, 파이어폭스, IE9 모두 가능
- svg (Scalable Vector Graphic)
아이폰과 아이패드에서 사용 할 포맷
eot는 용량이 압축되지 않고, svg는 오히려 용량이 더 커지기 때문에
최근 업그레이드 되는 표준 브라우저 등 woff가 앞으로 주력 가능성.
4. 웹폰트는 어떻게 변환하는가?
윈도우 폰트를 웹폰트로 변환하기 위해서는 변환 프로그램을 사용해야 하며,
MS에서 무료로 배포하는 프로그램인 WEFT 등의 툴들을 이용해 변환.
5. 웹페이지에 웹폰트 적용은 어떻게 하는가?
생성된 .eot 파일을 웹에 업로드 한 후, 아래와 같이 css를 적용시켜 준다.
- 기본 사용 형식 예제:
@font-face {
font-family:폰트 이름;
src:url('폰트명.woff') format('woff'); /* 최신 브라우저용 woff */
src:url('폰트명.eot') format('eot'); /* IE8 이하 */
src:url('폰트명.eot') format('eot?') format('eot'); /* IE9 */
src:local('☺'), url('폰트명.ttf') format('truetype');
}
ul li {font-family:폰트 이름;} /* ul li에 해당 폰트 적용 */
'@'의 의미는 외부 파일이나 속성을 불러오는 import 개념이며,
'☺' - 웃는 얼굴 트릭을 써서 사용자의 폰트를 pc에서 골라 브라우저에 표현하는 것을 막는다.
(매킨토시 시스템의 글꼴 이름에, 2바이트 유니코드 문자셋이 적용되지 않는 문제로,
글꼴 이름으로 사용될것 같지 않은 특수문자로 대체)
- 원하는 영역에만 적용시 예제:
@font-face {font-family:폰트 이름; src:url('폰트 위치'); format('포멧형식');}
ul li {font-family:폰트 이름;}
- 웹페이지 전체 글꼴에 적용시 예제:
@font-face {font-family:폰트 이름; src:url('폰트 위치'); format('포멧형식');}
body {font-family:폰트 이름; font-size:75%:}
6. 웹폰트 사용 장점
디자인의 용이성과 타 사이트와의 차별성을 둘 수 있다.
시스템 폰트에 비해 미적 부분이 뛰어나 이미지가 아닌 텍스트로 표현이 가능하기에
이미지로 대체되는 상황을 피할 수 있다. (이러한 이유로 모바일에서 많이 사용하죠.) - 표현의 자유 확장
또한, 텍스트를 이미지로 하는 일반적인 방식이 아니기에 정보전달 및 접근성 측면에서도 좀더 나아질 수 있다.
7. 웹폰트 사용 단점
저작권 문제.
사이트에 접속시 웹폰트 다운로드(나눔고딕 기준 약 4~5MB)로 인해 렌더링 시간이 오래 걸릴 수 있다.
8. 웹폰트 사용시 주의사항
공개된 무료 폰트 이외의 웹폰트 사용시 저작권에 주의해야 한다.
과도하게 변형이 심한 폰트는 오히려 가독성을 떨어뜨린다는 점에 주의해야 한다.
나눔고딕을 사용할 경우, 특히 모바일에서는 약 4~5MB 의 폰트 다운로드 상황에 대해 고려하지 않을 수 없다.
