We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS@font-face @規則は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターのどちらかから読み込むことができます。 local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、ユーザーエージェントがそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

@font-face で独自のフォントを提供できるようになることで、「安全な」フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

url()local() を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの機器に見つからない場合はフォントのコピーをフォールバックとしてダウンロードすることができます。

@font-face @規則は、 CSS の最上位だけでなく、 CSS の条件付き@規則グループの中でも使用することができます。

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

構文

記述子

font-display
フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
font-family
font プロパティの font face 値で使われる名前を指定します。
font-stretch
font-stretch 値です。
font-style
font-style 値です。
font-weight
font-weight 値です。
font-variant
font-variant 値です。
font-feature-settings
OpenType フォントで高度な印刷機能を制御することができるようにします。
font-variation-settings
変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。
src

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — format() 関数の中に形式を含めることができます。

src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("opentype");

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

unicode-range
font-face 規則で定義する Unicode コードポイントの範囲。

形式文法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-variation-settings: normal | [ <string> <number>] # ||
 [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}

where
<family-name> = <string> | <custom-ident>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。

動作例を見る

<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://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

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

メモ

  • フォントのダウンロードは、同一ドメイン制約に従います (フォントファイルは、それらが使用されているページと同じドメインにある必要があります)。 HTTP アクセス制御によりこの制限を緩和できます。
  • TrueType, OpenType, Web Open File Format (WOFF) のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。
  • @font-face は CSS セレクターの中で宣言することはできません。例えば、次の例は動作しません。
    .className { 
      @font-face { 
        font-family: MyHelvetica; 
        src: local("Helvetica Neue Bold"),
             local("HelveticaNeue-Bold"),
             url(MgOpenModernaBold.ttf);
        font-weight: bold; 
      } 
    }

仕様書

仕様書 状態 備考
WOFF File Format 2.0
WOFF2 font format の定義
勧告案 新しい圧縮アルゴリズムのフォント形式を定義
WOFF File Format 1.0
WOFF font format の定義
勧告 フォント形式の定義
CSS Fonts Module Level 3
@font-face の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4123.54103.1
WOFF6 あり3.5911.15.1
WOFF 23614

39

351

なし23102
SVG fonts なし なし なし なし なし あり
font-display60 なし58 なし47 あり
font-family4123.5693.1
font-feature-settings なし なし

343

15 -moz- 4

なし なし なし
font-variation-settings62 なし605 なし49 なし
font-style4 ?3.54103.1
font-weight4123.54103.1
src4123.5693.1
unicode-range あり あり369 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり12410 あり あり
WOFF4.4 あり あり4115 あり
WOFF 2363614

39

351

23103.0
SVG fonts なし なし なし なし なし あり なし
font-display6060 なし5847 あり なし
font-family2.2 ?124123.1 あり
font-feature-settings なし なし なし

343

15 -moz- 4

なし なし なし
font-variation-settings6262 なし605 あり なし なし
font-style あり ? ?410 あり あり
font-weight あり あり12410 あり あり
src2.2 ?124123.1 あり
unicode-range ? ? あり36 ? あり あり

1. From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Supported only on macOS 10.12 (Sierra) and later.

3. The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.

4. From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.

5. From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, ethertank, sosleepy, Level, Taken
最終更新者: mfuji09,