С момента появления CSS2 в 1998 году и директивы @font-face веб-типографика прошла путь от зависимости от «безопасных» системных шрифтов до практически безграничного доступа к тысячам гарнитур. Сегодня 82% сайтов в рейтинге Alexa Top 10 000 используют пользовательские веб-шрифты. Этот раздел охватывает технические аспекты их использования.
Форматы файлов
История форматов веб-шрифтов отражает историю браузерных войн и постепенной стандартизации:
| Формат | Год | Статус 2025 | Сжатие |
|---|---|---|---|
| EOT | 1998 | Устаревший (IE only) | Слабое |
| SVG Font | 2001 | Устаревший | Нет |
| TTF/OTF | Различный | Резервный для старых браузеров | Нет |
| WOFF | 2010 | Поддерживается повсеместно | zlib |
| WOFF2 | 2014 | Рекомендован (основной) | Brotli (~30% лучше WOFF) |
В 2025 году достаточно объявлять только формат WOFF2. Браузеры, не поддерживающие WOFF2 (IE11 и Safari до 10), занимают менее 1% глобальной аудитории.
@font-face: правильное объявление
Современное объявление @font-face включает несколько обязательных параметров для корректной работы:
font-display: управление FOIT и FOUT
FOIT (Flash of Invisible Text) — мерцание невидимого текста, когда браузер скрывает текст до загрузки шрифта. FOUT (Flash of Unstyled Text) — мерцание нестилизованного текста, когда браузер сначала показывает системный шрифт. Свойство font-display управляет этим поведением:
- auto: Поведение на усмотрение браузера
- block: Короткий период FOIT, затем FOUT
- swap: Немедленный FOUT, замена на кастомный шрифт при загрузке (рекомендовано для Core Web Vitals)
- fallback: Очень короткий FOIT, ограниченный период FOUT
- optional: Минимальный FOIT, использование кастомного шрифта только при мгновенной доступности
Google Fonts: преимущества и ограничения
Google Fonts — крупнейшая бесплатная библиотека веб-шрифтов с более чем 1500 семейств. Её использование через CDN имеет ряд преимуществ: автоматическое обновление до переменных версий, WOFF2 по умолчанию, поддержка font-display, языковые подсети. Однако с точки зрения GDPR и европейского законодательства о конфиденциальности загрузка шрифтов с серверов Google означает передачу IP-адреса пользователя третьей стороне — что требует явного согласия или самохостинга.
Решение для GDPR-совместимости: Используйте инструмент google-webfonts-helper (gwfh.mranftl.com) для загрузки шрифтовых файлов и генерации корректных CSS-объявлений для самохостинга. Это полностью исключает запросы к серверам Google.
Subsetting: оптимизация через подмножества
Шрифтовые файлы для полной языковой поддержки могут весить от 500 КБ до нескольких МБ. Если сайт использует только латиницу и кириллицу, нет смысла загружать глифы арабского, японского или символы специальных блоков Unicode. Subetting — создание усечённых подмножеств шрифта с нужными символами — позволяет сократить размер файла на 60–85%.
Системные шрифты как альтернатива
Использование системного стека шрифтов (font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) полностью исключает сетевые запросы и обеспечивает мгновенное отображение. San Francisco на macOS/iOS, Segoe UI на Windows и Roboto на Android обеспечивают хорошую читаемость. Это предпочтительный выбор для интерфейсов с приоритетом производительности.