JavaScript библиотеки для работы со шрифтами: полное руководство

Расширенные примеры работы со шрифтами через JavaScript

Пример 1: Загрузка нескольких шрифтов с разными начертаниями через FontFace API

async function loadFonts() {
  const fontConfigs = [
    { name: 'Roboto', weight: 300, url: '/fonts/Roboto-Light.woff2' },
    { name: 'Roboto', weight: 400, url: '/fonts/Roboto-Regular.woff2' },
    { name: 'Roboto', weight: 700, url: '/fonts/Roboto-Bold.woff2' },
    { name: 'Roboto', style: 'italic', weight: 400, url: '/fonts/Roboto-Italic.woff2' }
  ];

  const fontPromises = fontConfigs.map(config => {
    const font = new FontFace(config.name, `url(${config.url})`, {
      weight: config.weight,
      style: config.style || 'normal'
    });
    return font.load().then(() => document.fonts.add(font));
  });

  try {
    await Promise.all(fontPromises);
    console.log('Все начертания Roboto загружены');
  } catch (error) {
    console.error('Ошибка загрузки одного из шрифтов:', error);
  }
}
loadFonts();

Результат: в консоли появится сообщение об успешной загрузке, либо ошибка с указанием проблемного шрифта. После этого можно использовать шрифт в CSS как `font-family: 'Roboto', sans-serif;`.

Пример 2: Динамическое применение шрифта к элементу после загрузки (с использованием FontFaceObserver)

import FontFaceObserver from 'fontfaceobserver';

function applyFontToElement(element, fontFamily, fallback) {
  const observer = new FontFaceObserver(fontFamily);
  observer.load(null, 5000).then(() => {
    element.style.fontFamily = fontFamily;
    element.textContent = 'Текст отображается шрифтом ' + fontFamily;
  }).catch(() => {
    element.style.fontFamily = fallback + ', serif';
    element.textContent = 'Шрифт не загрузился. Используется запасной.';
  });
}

const header = document.getElementById('dynamic-font-header');
applyFontToElement(header, 'Playfair Display', 'Georgia');

Результат: если шрифт Playfair Display загружен за 5 секунд, заголовок отобразится им. Если нет - применится Georgia.

Пример 3: Web Font Loader с кастомными шрифтами и таймаутом

WebFont.load({
  custom: {
    families: ['MySansFont', 'MySerifFont'],
    urls: ['/path/to/mysans.css', '/path/to/myserif.css']
  },
  timeout: 7000,
  active: function() {
    document.querySelector('.status').textContent = 'Шрифты загружены';
    document.body.style.fontFamily = 'MySansFont, sans-serif';
  },
  inactive: function() {
    document.querySelector('.status').textContent = 'Ошибка загрузки, используем системные';
  }
});

Результат: на странице появится индикатор статуса. При успехе шрифт применяется, при неудаче - нет.

Пример 4: Отслеживание загрузки каждого шрифта индивидуально через CSS Font Loading API

async function checkFonts() {
  const fonts = document.fonts;
  for (const fontFace of fonts) {
    // fontFace.status может быть 'unloaded', 'loading', 'loaded', 'error'
    console.log(`Шрифт ${fontFace.family} (${fontFace.weight}): ${fontFace.status}`);
  }

  // Дожидаемся конкретного шрифта
  try {
    await document.fonts.load('bold 16px/1.5 "Open Sans"');
    console.log('Open Sans bold загружен');
  } catch (e) {
    console.warn('Ошибка загрузки Open Sans bold');
  }
}
checkFonts();

Результат: в консоли последовательно выводится состояние каждого шрифта, а затем сообщение об успехе или ошибке.

Пример 5: Обработка FOUT с помощью запасного шрифта и переключения классов

const fontObserver = new FontFaceObserver('Ubuntu');

// Начальный стиль с запасным шрифтом
const body = document.body;
body.style.fontFamily = 'Arial, sans-serif';

fontObserver.load(null, 3000).then(() => {
  // После загрузки переключаем на Ubuntu
  body.style.fontFamily = 'Ubuntu, sans-serif';
  body.classList.add('custom-font-loaded');
}).catch(() => {
  // Оставляем Arial, но добавляем класс-индикатор
  body.classList.add('font-load-failed');
});

Результат: текст сначала отображается шрифтом Arial, затем после загрузки Ubuntu заменяется. Если загрузка не удалась, остаётся Arial с классом для возможной стилизации.