Document: fonts プロパティ

Baseline Widely available

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

fonts は Document インターフェイスのプロパティで、文書の FontFaceSet インターフェイスを返します。

この機能は CSS フォント読み込み API の一部です。

値

返値は文書の FontFaceSet インターフェイスです。 FontFaceSet インターフェイスは新しいフォントを読み込んだり、以前読み込まれたフォントの状態をチェックしたりするのに有用です。

例

すべてのフォントが読み込まれた後の操作の実行

js
document.fonts.ready.then((fontFaceSet) => {
  // 使用するフォントをすべて読み込んだ後にのみ行う必要のある処理は、
  // ここで行います。
  const fontFaces = [...fontFaceSet];
  console.log(fontFaces);
  // サイトで使用していないフォントがアンロードされることがあります。
  console.log(fontFaces.map((f) => f.status));
});

このプロミスは、使用するすべてのフォントの読み込みとレイアウト処理が完了したときに履行されます。使用するフォントの集合は、宣言されたフォントの集合とは異なっても構いません。例えば、オプションのフォント（すなわち font-display: optional で宣言されたフォント）が時間内に読み込めなかった場合などです。

仕様書

Specification
CSS Font Loading Module Level 3
# FontFaceSet-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報