FontFace: load() メソッド

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.

load()FontFace インターフェイスのメソッドで、 source が URL で指定されたフォントをリクエストして読み込みます。このメソッドは、現在の FontFace オブジェクトで解決される Promise を返します。

フォントフェイスの source がバイナリーデータを指定されていた場合、またはフォントフェイスのフォント status プロパティが unloaded 以外であった場合、このメソッドは何も行いません。

構文

js
load()

引数

なし。

返値

Promise で、フォントが読み込まれたときは現在の FontFace オブジェクトへの参照で解決し、読み込みに失敗したときは NetworkError DOMException で拒否されます。

例外

NetworkError DOMException

フォントを読み込もうとして失敗したことを示します。

この単純な例では、フォントを読み込んで、それを使用してキャンバス要素(js-canvas の ID を持つ)にテキストを表示します。

js
const canvas = document.getElementById("js-canvas");

// Google フォントから "Bitter" フォントを読み込み
const fontFile = new FontFace(
  "FontFamily Style Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(fontFile);

fontFile.load().then(
  () => {
    // フォントを正常に読み込めた
    canvas.width = 650;
    canvas.height = 100;
    const ctx = canvas.getContext("2d");

    ctx.font = '36px "FontFamily Style Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);

仕様書

Specification
CSS Font Loading Module Level 3
# font-face-load

ブラウザーの互換性

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
load

Legend

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

Full support
Full support