Widely available 安全に使用可能。すべての主要ブラウザで長年サポート済み。WOFF2 形式を優先的に使用すること。

@font-face

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

フォントWeb フォント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@font-face
1
12
3.5
3.1
18
2
DOM API
CSSFontFaceRule

CSSFontFaceRule インターフェイスは @font-face アットルールを表します。
1
12
3.5
3.1
18
2
style

style は CSSFontFaceRule インターフェイスの読み取り専用プロパティで、この @font-face アットルールからスタイル情報を返します。これは CSSStyleDeclaration オブジェクトの形です。
1
12
3.5
3.1
18
2
CSS @ ルール
OpenType CBDT CBLC

OpenType CBDT および CBLC レンダリング
66
79
66
OpenType SBIX

OpenType SBIX レンダリング
66
79
9.1
66
9.3
WOFF

WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しいウェブフォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。
6
12
3.5
5.1
18
5
WOFF 2

WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しいウェブフォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。
36
14
39
10
36
10
font-family

font-family は CSS の記述子で、 @font-face アットルールで指定されたフォントのフォントファミリーを指定することができます。
4
12
3.5
3.1
18
2
src

src は CSS の @font-face アットルールの記述子で、フォントデータを含むリソースを指定します。 @font-face ルールを有効にするためには必要です。
4
12
3.5
3.1
18
2
src.drop invalid item

無効な項目 (ソース文字列ではない) を削除します
108
108
109
108
src.format keyword

`フォーマット(キーワード)`
108
108
105
4
108
5
src.format variations
非標準

`format('*-variations')`
66
17
62
11
66
11
src.tech keyword

`技術(キーワード)`
108
108
107
17
108
17
unicode-range

unicode-range は CSS の記述子で、 @font-face を用いて定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。
1
12
36
3.1
18
3
その他
css.types.url

url() は CSS の関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、data URL の何れかです。 url() 関数は attr 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートのいずれかになります。url() 関数記法は データ型の値になります。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • macOS 10.12 (Sierra) 以降でのみサポートされます。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • Chrome は「tech()」の無効な項目を削除しますが、他の無効な値は削除しません
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • Edge は「tech()」の無効な項目を削除しますが、他の無効な値は削除しません
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • Chrome Android は「tech()」の無効な項目を削除しますが、他の無効な値は削除しません

基本構文

CSS 
@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "MyFont", sans-serif;
}

ライブデモ

fontuit

@font-face fontuit demo.

プレビュー全画面表示

Font-display

@font-face Font-display demo.

プレビュー全画面表示

fo-matpriority

@font-face fo-matpriority demo.

プレビュー全画面表示

実務での使いどころ

  • ブランドフォントの適用

    企業やプロジェクト固有のフォントをウェブサイト全体に統一して使用できる。

  • 多言語対応

    特定の言語に最適化されたフォントを読み込み、各言語の文字を美しく表示する。

注意点

  • フォントファイルのサイズが大きいとページの読み込み速度に影響するため、必要なウェイトとサブセットのみ読み込むこと。
  • FOIT（Flash of Invisible Text）を避けるため font-display を併用すること。

アクセシビリティ

  • フォントが読み込まれない場合でもテキストが読めるよう、適切なフォールバックフォントを指定する。

参考リンク