Почти каждый пользователь интернета сталкивался с неприятным визуальным рывком: страница уже открылась, вы начинаете читать текст, и вдруг спустя мгновение абзацы подпрыгивают, потому что браузер догрузил кастомный шрифт. Во фронтенд-разработке эта проблема известна как сдвиг макета (Cumulative Layout Shift, CLS), и борьба с ней обычно требует написания разрозненных скриптов под разные шрифтовые сервисы.
Один поставщик шрифтов отдает сгенерированную CSS-таблицу, требующую ручного парсинга; другой возвращает нестандартный JSON; третий запрашивает токен проекта; а пакеты из npm имеют собственную файловую структуру. Сообщество UnJS выпустило библиотеку Unifont, которая выступает универсальным адаптером, стандартизирующим работу со шрифтовыми сервисами через единый типизированный интерфейс.
Каскадный поиск по цепочке провайдеров
Вместо индивидуального кода интеграции под каждый сервис Unifont вводит цепочку провайдеров (Chained Providers). Разработчик задает приоритет источников один раз: если гарнитура отсутствует в первом сервисе, запрос автоматически передается следующему.
Библиотека поддерживает крупнейшие каталоги: Google Fonts, Bunny Fonts (европейский провайдер с повышенной защитой приватности без передачи IP в Google), Fontshare, Adobe Fonts (Typekit) и реестр npm с открытыми пакетами @fontsource. На выходе формируется строгая структура: прямые ссылки на оптимизированные файлы woff2, числовые веса (от 100 до 900), стили и языковые срезы (subsets).
Математика нулевого сдвига верстки
Инженерная ценность Unifont шире простого сбора ссылок. Чтобы устранить скачки текста, современные браузеры позволяют подгонять геометрию системных шрифтов (Arial, Roboto) под целевую гарнитуру через CSS-дескрипторы ascent-override, descent-override и size-adjust. Когда пропорции совпадают, текст занимает то же пространство на экране еще до скачивания файла шрифта.
Вычисление этих метрик вручную требует анализа внутренних таблиц бинарных шрифтов (OS/2, hhea). Unifont рассчитывает коэффициенты подгонки автоматически, генерируя готовый набор правил для безопасного фолбэка. Дополнительно библиотека выделяет диапазоны символов unicode-range, гарантируя загрузку только тех глифов, которые присутствуют на странице.
Сквозной сценарий: от инициализации до генерации стилей
Интерфейс библиотеки полностью типизирован на TypeScript. Сначала настраивается конвейер источников:
import { createUnifont, providers } from 'unifont'
// Инициализация каскадного поиска гарнитур
const unifont = await createUnifont([
providers.google(),
providers.fontshare(),
providers.fontsource()
])
// Разрешение гарнитуры с фильтрацией по начертаниям
const { fonts, fallbacks } = await unifont.resolveFont('Poppins', {
weights: ['400', '600', '700'],
styles: ['normal', 'italic'],
subsets: ['latin', 'latin-ext']
})
Полученные дескрипторы используются для генерации правил в стилях страницы:
// Генерация правил @font-face с контролем диапазонов символов
for (const font of fonts) {
const cssRule = `
@font-face {
font-family: '${font.family}';
font-style: ${font.style};
font-weight: ${font.weight};
font-display: swap;
src: url('${font.src}') format('woff2');
unicode-range: ${font.unicodeRange.join(', ')};
}
`
document.head.insertAdjacentHTML('beforeend', `<style>${cssRule}</style>`)
}
Браузер приступает к загрузке нужных начертаний мгновенно и без дублирующих запросов.
Границы применения и архитектурная ниша
Unifont сфокусирован на метаданных и намеренно не скачивает бинарные файлы на диск — эту задачу берут на себя вышестоящие инструменты, например @nuxt/fonts.
Пакет поставляется только в формате ESM и не поддерживает CommonJS require(). Публичный прокси proxy.unifont.dev для сред WebContainers имеет лимиты трафика и не предназначен для продакшена. Для проектов с одним статическим шрифтом библиотека избыточна, но в дизайн-системах и мета-фреймворках Unifont избавляет от сотен строк хрупкого кода интеграции.