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 値です。 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("opentype");

利用可能な形式は、"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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
WOFFChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 5.1WebView Android 完全対応 4.4Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 あり
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 完全対応 36Edge Mobile 完全対応 14Firefox 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 完全対応 23Safari iOS 完全対応 10Samsung Internet Android 完全対応 3.0
SVG fonts
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし
font-displayChrome 完全対応 60Edge 未対応 なしFirefox 完全対応 58IE 未対応 なしOpera 完全対応 47Safari 完全対応 ありWebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 未対応 なしFirefox Android 完全対応 58Opera Android 完全対応 47Safari iOS 完全対応 ありSamsung Internet Android 未対応 なし
font-familyChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
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 未対応 なしEdge Mobile 未対応 なし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-variation-settingsChrome 完全対応 62Edge 未対応 なしFirefox 完全対応 60
無効
完全対応 60
無効
無効 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.
IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Edge Mobile 未対応 なしFirefox Android 完全対応 60
無効
完全対応 60
無効
無効 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.
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
font-styleChrome 完全対応 4Edge ? Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
font-weightChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
unicode-rangeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 36IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 36Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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

関連情報

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

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