Окно: метод queryLocalFonts()

Метод window.queryLocalFonts() возвращает Promise, который выполняется с массивом FontData объектов, представляющих шрифты, доступные локально.

Для использования этого метода пользователь должен предоставить разрешение на доступ к local-fonts (статус разрешения можно запросить с помощью API разрешений). Кроме того, эта функция может быть заблокирована Политикой разрешений, установленной на вашем сервере.

options Необязательно

Содержит необязательные параметры конфигурации. В настоящее время определён только один параметр:

postscriptNames Необязательно

Массив имён шрифтов PostScript. Если этот параметр указан, в результаты будут включены только шрифты с именами PostScript, соответствующими именам в массиве; в противном случае будут включены все шрифты.

A Promise, который выполняется с массивом FontData объектов, представляющих доступные локально шрифты.

NotAllowedError DOMException

Пользователь отказался предоставить разрешение на использование этой функции при отображении запроса на разрешение браузера после первого вызова метода.

SecurityError DOMException

Использование этой функции было заблокировано политикой разрешений, или она не была вызвана с помощью пользовательского действия, например, нажатия кнопки, или текущий происхождение является непрозрачным.

Для демонстрации в реальном времени см. Демонстрацию выбора шрифта.

Следующий фрагмент запросит все доступные шрифты и выведет метаданные. Это может быть использовано, например, для заполнения поля выбора шрифта.

async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Для ограничения возвращаемых данных шрифтов только определённым списком шрифтов используйте параметр postscriptNames.

async function returnSpecificFonts() {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
  });

  return availableFonts;
}

Метод blob() предоставляет доступ к данным низкого уровня SFNT — это формат файла шрифта, который может содержать другие форматы шрифтов, такие как PostScript, TrueType, OpenType или Web Open Font Format (WOFF).

async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` returns a Blob containing valid and complete
      // SFNT-wrapped font data.
      const sfnt = await fontData.blob();
      // Slice out only the bytes we need: the first 4 bytes are the SFNT
      // version info.
      // Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("Outline format:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

• API локального доступа к шрифтам
• Использование продвинутой типографики с локальными шрифтами
• @font-face