@font-face

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

@font-face は CSS のアットルールで、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。

構文

css

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

記述子

ascent-override: フォントのアセンダーの寸法を定義します。
descent-override: フォントのディセンダーの寸法を定義します。
font-display: フォントのダウンロードおよび準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
font-family: font プロパティのフォントフェイス値で使われる名前を指定します。
font-stretch: font-stretch 値です。 font-face で対応する範囲を指定するために、 font-stretch: 50% 200%; のように 2 つの値を受け付けます。
font-style: font-style 値です。 font-face で対応する範囲を指定するために、 font-style: oblique 20deg 50deg; のように 2 つの値を受け付けます。
font-weight: font-weight 値です。 font-face で対応する範囲を指定するために、 font-weight: 100 400; のように 2 つの値を受け付けます。

メモ: font-variant 記述子は 2018 年に仕様から除去されました。 font-variant 値プロパティは対応していますが、記述子に相当するものはありません。
font-feature-settings: OpenType フォントで高度な印刷機能を制御することができるようにします。
font-variation-settings: OpenType または TrueType フォントの種類を低レベルで制御するために、変化形の特徴を表す 4 文字の軸名を、種類の値と共に指定します。
line-gap-override: フォントの行間の寸法を定義します。
size-adjust: このフォントに関連するグリフのアウトラインとメトリックの倍率を定義します。これにより、同じフォントサイズでレンダリングしたときに、さまざまなフォントのデザインを調和させることが容易になります。
src: フォントの形式や技術に関するヒントを含むフォントリソースへの参照を指定します。これは @font-face ルールが有効になるためには必須です。
unicode-range: フォントで使用される Unicode コードポイントの範囲です。

解説

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

local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、ユーザーエージェントがそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

ブラウザーはリストの宣言順にリソースを読み込もうとするので、通常は local() を url() の前に書くべきです。どちらの関数もオプションなので、 url() を使用せずに local() のみを 1 つ以上格納したルールブロックも可能です。 format() や tech() の値がより具体的なフォントが必要な場合は、これらの値を持たないバージョンの前に記載する必要があります。

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

メモ: Fallback strategies for loading fonts on older browsers are described in the src descriptor page.

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

フォントの MIME タイプ

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

メモ

ウェブフォントは同一ドメイン制約の対象となります（フォントファイルはそれを使用するページと同じドメインに存在しなければなりません）。ただし、 HTTP アクセス制御を使用するとこの制限を緩和することができます。

@font-face は CSS セレクターの中で宣言することはできません。例えば、以下の例は動作しません。

css

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

形式文法

@font-face = 
  @font-face { <declaration-list> }

例

ダウンロード可能なフォントを定義

この例は使用するダウンロード可能なフォントを指定し、文書の本文全体に適用します。

html

<body>
  This is Bitstream Vera Serif Bold.
</body>

css

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

ローカルフォントの代替を指定

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

css

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

仕様書

Specification
CSS Fonts Module Level 4 # font-face-rule

ブラウザーの互換性

BCD tables only load in the browser