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.

fontsDocument インターフェイスのプロパティで、文書の 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

ブラウザーの互換性

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
fonts

Legend

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

Full support
Full support

関連情報