Какой формат лучше выбрать для шрифтов?

Выбор формата шрифтов для веб-проектов

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

Основные форматы шрифтов

WOFF/WOFF2 — безусловные лидеры для современных веб-проектов. WOFF2 (Web Open Font Format 2) обеспечивает лучшее сжатие (в среднем на 30% меньше размера, чем WOFF), что напрямую влияет на скорость загрузки страниц. Формат специально разработан для веба, поддерживает сложное сжатие Brotli и имеет отличную совместимость со всеми современными браузерами.

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

TTF/OTF — базовые форматы TrueType и OpenType подходят в качестве fallback для старых систем, но их размер обычно больше, чем у WOFF2. Эти форматы стоит включать в качестве резервных вариантов для максимальной совместимости.

EOT — специфичный для Internet Explorer формат, актуальный только для поддержки IE8-IE10. В современных проектах его можно опускать, если не требуется поддержка этих устаревших браузеров.

SVG — формат, необходимый для поддержки очень старых версий iOS Safari (4.1 и ниже). Практически потерял актуальность.

Рекомендуемая стратегия

Для большинства проектов я рекомендую следующий подход:

1. Основной формат — WOFF2 для всех современных браузеров
2. Fallback — WOFF для браузеров, не поддерживающих WOFF2
3. Дополнительно — TTF/OTF если требуется поддержка очень старых Android-устройств
4. Специальные случаи — EOT только при обязательной поддержке IE8-IE10

Критерии выбора

• Производительность: WOFF2 обеспечивает наилучшее сжатие
• Совместимость: Комбинирование WOFF2 + WOFF покрывает 99%+ пользователей
• Функциональность: Все форматы поддерживают основные возможности (керинг, лигатуры, OpenType-фичи)
• Лицензирование: WOFF/WOFF2 содержат метаданные о лицензии

Практические рекомендации

Оптимизация загрузки:

/* Используйте unicode-range для загрузки только необходимых символов */
@font-face {
  font-family: 'CustomFont';
  src: url('font-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF;
  font-display: swap; /* Критически важно для производительности */
}

Font-display стратегии:

• swap — шрифт отображается сразу системным, затем заменяется кастомным
• optional — шрифт загружается только если доступен быстро
• block — текст скрыт до загрузки шрифта (осторожно с CLS!)

Технические нюансы

При подготовке шрифтов обязательно:

• Субсеттинг — удаление неиспользуемых символов и языковых наборов
• Вариативные шрифты — рассмотреть использование variable fonts, которые заменяют несколько файлов одним
• Предзагрузка критических шрифтов для ключевого текста

<!-- Предзагрузка критически важных шрифтов -->
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>

Современный тренд — variable fonts

Вариативные шрифты — это формат OpenType 1.8, который позволяет хранить целое семейство начертаний в одном файле с регулируемыми параметрами (weight, width, slant). Это может значительно уменьшить количество HTTP-запросов и общий вес шрифтов.

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900; /* Диапазон значений */
  font-stretch: 75% 125%;
}

Итоговая рекомендация

Для нового проекта в 2024 году: используйте WOFF2 в качестве основного формата, WOFF как fallback, обязательно настраивайте font-display: swap и рассматривайте variable fonts для оптимизации производительности. Всегда проверяйте поддержку в целевых браузерах через Can I Use и тестируйте рендеринг на различных устройствах. Правильный выбор формата шрифтов — это баланс между качеством типографики и скоростью загрузки страницы.