@font-face

요약(Summary)

CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

문법(Syntax)

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

속성값(Values)

<a-remote-font-name>: font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
<source>: 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
<weight>: 폰트의 굵기(font weight) 값.
<style>: 폰트 스타일(font style) 값.

사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

예제(Examples)

아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.

View live sample

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

주의사항(Notes)

Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 HTTP access controls 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는 동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).
주의사항: TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.
Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.

명세(Specifications)

Specification	Status	Comment
WOFF File Format 1.0 The definition of 'WOFF font format' in that specification.	Recommendation	Font format specification
CSS Fonts Module Level 3 The definition of '@font-face' in that specification.	Candidate Recommendation

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	3.5 (1.9.1)	4.0	4.0	10.0	3.1
WOFF	3.5 (1.9.1)	6.0	9.0	11.10	5.1
SVG Font	Not supported Unimplemented (see bug 119490)	yes	Not supported	yes	yes

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mini	Opera Mobile	Safari Mobile
Basic support	(Yes)	1.0 (1.9.1)	?	Not supported	10.0	(Yes)
WOFF	Not supported	5.0 (5.0)	?	Not supported	11.0	Not supported
SVG fonts	Not supported	Not supported Unimplemented (see bug 119490)	?	Not supported	10.0	(Yes)

주의사항(Notes)

Embedded OpenType 폰트는 특허가 적용되기 때문에, 호환성 테이블(compatibility table)에 포함되어 있지 않다. IE 9.0 이전의 브라우저에서, IE는 이 포맷(format)만을 지원했었다.
TrueType 과 OpenType 는 WOFF로 교체되어 포함되지 않았다.

@font-face

요약(Summary)

문법(Syntax)

속성값(Values)

예제(Examples)

주의사항(Notes)

명세(Specifications)

브라우저 호환성(Browser compatibility)

주의사항(Notes)

참고자료(See also)

문서 태그 및 공헌자