Оптимизация веб‑шрифтов: WOFF2, локальный хостинг и блок @font-face

Зачем упрощать стек форматов

Старый набор из .eot, нескольких .ttf и тяжёлого SVG для иконического шрифта многократно увеличивает первую отрисовку. Современным движкам достаточно WOFF2 как основного и WOFF как запасного; прочие форматы имеет смысл оставить только если есть измеримая доля древних клиентов в вашей аудитории.

Сжатие и количество начертаний

Каждое дополнительное семейство начертаний (light, semi, italic) умножает вес загрузки. Имеет смысл ограничить набор теми гарнитурами, что реально используются в макете, прогон файлов через современный компрессор и включать только нужные символы там, где это поддерживает конвейер сборки CSS.

Локально vs CDN

Самостоятельный хостинг шрифтов на том же домене убирает лишнее DNS‑рукопожатие и снижает риск блокировки третьей стороны в политике приватности. При переносе с публичного CDN проверяют лицензию на самостоятельную отдачу файлов.

Пример блока объявления

Сначала пробуют локально установленные начертания пользователя — это избегает загрузки, если семейство уже есть в системе.

@font-face {
  font-family: 'Display Sans';
  font-display: swap;
  src: local('Display Sans Regular'),
       url('/fonts/display-sans-400.woff2') format('woff2'),
       url('/fonts/display-sans-400.woff') format('woff');
}

Для проектов на 1С‑Битрикс файлы обычно кладут в /local/templates/…/fonts/ и подключают через сброс кеша стилей при выкладке.