이전에는 웹상에서 사용할 수 있는 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를 이미지로 만들어 사용하였다. 하지만 이는 많은 트래픽을 유발한다.
웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 사용자가 웹페이지에 접근할 지 알 수 없다. 이러한 문제를 해결할 수 있는 방법이 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청하는 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 매번 다운로드는 아니고 클라이언트에 해당 폰트가 존재하지 않을 경우 전송된다.
1. CDN(Content Delivery Network) 링크 방식
가장 간단한 방법으로 CDN 링크를 사용하는 것이다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
*{font-family : 'Nanum Gothic' , sans-serif;}2. 서버 폰트 로딩 방식
CDN 방식은 간편하지만 여러 폰트를 사용하면 로딩 속도가 느릴 수 있다.
이러한 단점을 보완한 방법이 서버폰트 로딩 방식이다.
@font-face{
font-family : nanum;
src : url("nanum.woff");
}
*{font-family : nanum , snas-serif;}폰트 파일을 서버에 두고 요청이 오면 전송하는 방식이다.
브라우저에 따라 지원하는 폰트 파일 형식이 다르다는 것을 유의할것!
한글과 영문을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글폰트를 지정하여야 한다. 한글 폰트부터 지정하면 영문에도 한글 폰트가 지정된다.
