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

ブラウザーの互換性

BCD tables only load in the browser