@font-face

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

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

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 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-stretch: 50% 200%; のように二つの値を受け付けます。
font-style
font-style 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-style: oblique 20deg 50deg; のように二つの値を受け付けます。
font-weight
font-weight 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-weight: 100 400; のように二つの値を受け付けます。
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("truetype");

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

unicode-range
フォントで使用される Unicode コードポイントの範囲です。

形式文法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
where 
<family-name> = <string> | <custom-ident>+

例

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

動作例を見る

<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;
}

フォントの MIME タイプ

形式 MIME タイプ
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

メモ

  • フォントのダウンロードは、同一ドメイン制約に従います (フォントファイルは、それらが使用されているページと同じドメインにある必要があります)。 HTTP アクセス制御によりこの制限を緩和できます。
  • @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 の定義		 勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@font-faceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
SVG fonts
非推奨非標準
Chrome 未対応 1 — 38Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 15 — 25Safari 完全対応 3.2WebView Android 未対応 ≤37 — 38Chrome Android 未対応 18 — 38Firefox Android 未対応 なしOpera Android 未対応 14 — 25Safari iOS 完全対応 3Samsung Internet Android 未対応 1.0 — 3.0
WOFFChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 5.1WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
WOFF 2Chrome 完全対応 36Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 35
無効
無効 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.
IE 未対応 なしOpera 完全対応 23Safari 完全対応 10
補足
完全対応 10
補足
補足 Supported only on macOS 10.12 (Sierra) and later.
WebView Android 完全対応 37Chrome Android 完全対応 36Firefox Android 完全対応 39
完全対応 39
完全対応 35
無効
無効 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.
Opera Android 完全対応 24Safari iOS 完全対応 10Samsung Internet Android 完全対応 3.0
font-displayChrome 完全対応 72Edge 完全対応 79Firefox 完全対応 58IE 未対応 なしOpera 完全対応 60Safari 完全対応 11.1WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 完全対応 58Opera Android 完全対応 51Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 11.0
font-familyChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
font-feature-settingsChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
補足
完全対応 34
補足
補足 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.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
補足
完全対応 34
補足
補足 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.
完全対応 15
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
font-stretchChrome 完全対応 62Edge 完全対応 17Firefox 完全対応 62IE 未対応 なしOpera 完全対応 49Safari 完全対応 10.1WebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 62Opera Android 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
font-styleChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
font-variation-settingsChrome 完全対応 62Edge 完全対応 79Firefox 完全対応 62
完全対応 62
未対応 60 — 62
無効
無効 From version 60 until version 62 (exclusive): 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.
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 62
完全対応 62
未対応 60 — 62
無効
無効 From version 60 until version 62 (exclusive): 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.
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
font-weightChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
srcChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
unicode-rangeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 36IE 完全対応 9Opera 完全対応 15Safari 完全対応 3.2WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 36Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報