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 ⁨2020年1月⁩.

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

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

構文

load()

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

例

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

<canvas id="js-canvas"></canvas>

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);
  },
);