1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. アットルール
  5. @font-face

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

@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 2015年7月.

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

@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-face ルールを有効にするためには、 font-family 名が必要です。

font-stretch

font-stretch 値です。フォントフェイスで対応する範囲を指定するために、font-stretch: 50% 200%; のように 2 つの値を受け付けます。

font-style

font-style 値です。フォントフェイスで対応する範囲を指定するために、 font-style: oblique 20deg 50deg; のように 2 つの値を受け付けます。

font-weight

font-weight 値です。フォントフェイスで対応する範囲を指定するために、 font-weight: 100 400; のように 2 つの値を受け付けます。

font-feature-settings

OpenType フォントで高度な印刷機能を制御することができるようにします。

font-variation-settings

OpenType または TrueType フォントの種類を低レベルで制御するために、変化形の特徴を表す 4 文字の軸名を、種類の値と共に指定します。

line-gap-override

フォントの行間の寸法を定義します。

size-adjust

このフォントに関連するグリフのアウトラインとメトリックの倍率を定義します。これにより、同じフォントサイズでレンダリングしたときに、さまざまなフォントのデザインを調和させることが容易になります。

src

フォントの形式や技術に関するヒントを含むフォントリソースへの参照を指定します。 src は @font-face ルールが有効になるためには必須です。

unicode-range

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

解説

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

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

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

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

メモ: 古いブラウザーでのフォント読み込みの代替戦略については、src 記述子のページで説明されています。

@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> }
この構文は CSS Fonts Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

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

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

html
<body>
  This is Bitstream Vera Serif Bold.
</body>
css
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("/proxy/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

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content