@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.

* Some parts of this feature may have varying levels of support.

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

構文

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-face
OpenType CBDT and CBLC rendering
OpenType COLRv0 rendering
OpenType COLRv1 rendering
OpenType SBIX rendering
OpenType SVG rendering
SVG fonts
DeprecatedNon-standard
WOFF
WOFF 2
ascent-override
descent-override
font-display
font-family
font-feature-settings
font-stretch
font-style
font-variant
Non-standard
font-variation-settings
font-weight
line-gap-override
size-adjust
src
Drop invalid item (not src string)
format(keyword)
format('*-variations')
Non-standard
tech(keyword)
unicode-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報