FontFace: метод load()

Метод load() интерфейса FontFace запрашивает и загружает шрифт, source которого был указан как URL. Он возвращает Promise, который разрешается текущим объектом FontFace.

Если source шрифта был указан как двоичные данные или свойство шрифта status отличается от unloaded, то этот метод ничего не делает.

Нет.

Promise, который разрешается ссылкой на текущий объект FontFace при загрузке шрифта или отклоняется с NetworkError DOMException, если процесс загрузки завершился неудачно.

NetworkError DOMException

Указывает, что попытка загрузить шрифт завершилась неудачно.

В этом простом примере загружается шрифт и используется для отображения текста в элементе canvas (с id js-canvas).

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

// load the "Bitter" font from Google Fonts
const fontFile = new FontFace(
  "FontFamily Style Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(fontFile);

fontFile.load().then(
  () => {
    // font loaded successfully!
    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);
  },
);