@font-face는 새로운 font-family를 생성하는 CSS rule로, 이를 이용하면 local이 아닌 remote server 상에 있는 폰트로 웹 페이지를 렌더링 할 수 있습니다. 원래는 Internet Explorer 4에서부터 독자적으로 지원했었던 기능이었지만, CSS 3에서 공식적으로 채택되어 현재 Firefox 3.5, Safari 3.1, Opera 10에서도 지원하고 있습니다. 다만 IE에서는 Embedded OpenType (EOT) 포맷만을 지원하고 있고, 최근에 지원하기 시작한 FF, Safari, Opera의 경우 TrueType과 OpenType만을 지원하고 있습니다.
Syntax
font-face를 정의하는 syntax는 다음과 같고,
@font-face {
font-family: <a-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
[unicode-range: <U+nnn-nnn> [,<U+nnn-nnn>]*];
}
실제 사용은 다음과 같이 합니다. @font-face에서 명시한 font-family를 일반적인 폰트 이름처럼 사용하면 됩니다.
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format("opentype");
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}
새로 알게된 내용들
local hint : src descriptor에는 서버에 있는 폰트 url을 명시하는 url hint 외에도 local hint를 이용해서 로컬에 있는 폰트를 지정할 수 있습니다. 또한 소스를 하나 이상 명시할 수 있습니다. 이들을 사용하는 이유는, 해당 폰트가 설치되어 있으면 설치된 폰트를 사용하고 그렇지 않은 경우에만 다운로드 받도록 하기 위함입니다.
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue"),
local("HelveticaNeue"),
url(MgOpenModernaRegular.ttf);
}
format hint : 여러 가지 유형의 폰트를 지원할 수 있으므로 source의 포맷을 명시하는 format hint 키워드가 있습니다. CSS Fonts Module Level 3(W3C Working Draft 18 June 2009) 문서에서는 “truetype”, “opentype”, “truetype-aat”, “embedded-opentype”, “svg”를 예제로 들고 있는데, 실제 브라우저에 따라 지원의 차이가 있을 수 있고 또 다른 포맷이 생길수도 있습니다. 참고로 IE에서는 format hint를 인식하지 못하며 포함된 경우 이를 무시하게 됩니다.
@font-face {
font-family: Gentium;
src: url(Gentium.ttf) format("opentype");
}
Cross Browsed @font-face
IE의 경우 eot 파일을, 그 외 브라우저(위에서 언급한 것들)에서는 TrueType 및 OpenType만을 지원하므로 크로스 브라우징이 가능하게끔 코딩을 해야 합니다. 앞서 언급한 src descriptor의 format hint를 이용하여 다음과 같이 코딩할 수 있습니다. 다음 코드에서 어떤 @font-face를 먼저 코딩하는지가 중요합니다.
@font-face { /* for IE */
font-family: Gentium;
src: url('Gentium.eot');
}
@font-face { /* for non-IE */
font-family: Gentium;
src: url('Gentium.ttf') format('opentype');
}
Ajaxian의 @font-face: How to embed it, and how it looks across browsers에서는 하나의 @font-face에 src descriptor를 두 번 선언해서 사용하고 있습니다. 이런식으로도 가능하다면 위 코드는 다음과 같이 변경할 수 있습니다.
@font-face {
font-family: Gentium;
src: url('Gentium.eot');
src: url('Gentium.ttf') format('opentype');
}
Bulletproof @font-face syntax
Bulletproof @font-face syntax을 읽고 추가한 사항입니다.
위의 Cross Browsed @font-face 단락에서 제시한 방법 모두 겉으로 보기에는 크로스 브라우징에는 문제가 없으나, IE에서 조금 이상한 request가 발생하는 문제(?)가 있습니다. IE에서는 먼저 Gentium.eot 파일을 요청(HTTP request)하고 다음번 src에 대해서는 Gentium.ttf’)%20format(‘opentype 로 요청을 발생시킴니다. IE가 src를 파싱하는 구조때문인것으로 보이는데 이 경우 404 응답(response)이 올 것입니다.
다음 코드는 이러한 문제를 해결하기 위한 것으로 ttf를 요청할 때 반드시 local hint를 먼저 입력하는 방식입니다. 이 방식은 non-IE 브라우저에서는 로컬에 설치된 경우 이를 사용할 수 있다는 장점이 있으며, IE에서는 local hint 자체를 인식하지 못하므로 파싱 오류가 발생할 것이고 어떤 요청도 하지 않게 됩니다. 참고로 local hint가 2번 사용된 것은 OS X의 Safari에서는 전체 폰트 이름과 Postscript 이름이 틀린 경우 Postscript 이름만을 사용하기 때문에 이를 추가해 준 것입니다(두번째 local hint에 있는 이름).
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}
다음과 같은 방식으로도 불필요한 요청(request)이 발생하지 않게 할 수 있다고 하지만 너무 tricky한 코드라 사용하지 않는게 좋을듯 하네요.
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot'); /* here you go, IE */
}
@font-face{
font-family:'Graublau Web';
src: url(//:) format ('no404'), url('GraublauWeb.otf') format('opentype'); /* tricky! */
}
의문 사항
font-weight, font-style: font-weight와 font-style을 지정할 경우 해당 font-family는 한가지 스타일만을 가질 수 있는 것일까요?
unicode-range 지원 : CSS Fonts Module Level 3(W3C Working Draft 18 June 2009) 문서에서는 존재하지만 MDC와 MSDN에서는 찾아볼 수 없습니다. 만일 Firefox에서 지원하고, font-family 글에서 언급한 동작방식을 고려한다면 한글과 영문 폰트를 css font-family에 명시되는 순서에 무관하게 사용할 수 있을것 같습니다.
References
본 문서에 나온 예제 코드들은 모두 아래의 문서들에서 가져온 것들입니다.
