Шрифты на сайте: подключение, оптимизация, лицензии

Роль шрифтов в веб-дизайне

Шрифт — это голос вашего бренда в цифровом пространстве. Правильно подобранный шрифт улучшает читаемость, формирует имидж компании и влияет на скорость загрузки сайта. Неправильный — ухудшает восприятие контента и замедляет страницу.

Типы шрифтов для веба

Системные шрифты

Шрифты, установленные в ОС пользователя: Arial, Times New Roman, Georgia. Преимущество — мгновенная загрузка (ничего не скачивается). Недостаток — ограниченный выбор, разный вид на разных ОС.

Веб-шрифты

Скачиваются с сервера при загрузке страницы. Гарантируют одинаковый вид на всех устройствах. Популярные источники: Google Fonts, Adobe Fonts, локальный хостинг.

Вариативные шрифты (Variable Fonts)

Один файл содержит все начертания (от thin до black). Экономят трафик: один вариативный файл вместо 5–10 обычных. Поддерживаются всеми современными браузерами.

Как подключать шрифты

Google Fonts (просто, но с нюансами)

Подключение через <link> в head — самый простой способ. Но: запросы к серверам Google добавляют задержку, и с точки зрения GDPR (для европейских пользователей) могут быть проблемы.

Локальный хостинг (рекомендуем)

Скачайте шрифты и разместите на своём сервере. Используйте @font-face в CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

Локальный хостинг быстрее (нет внешних запросов), надёжнее (не зависит от Google), и полностью соответствует GDPR.

Формат WOFF2

Используйте WOFF2 — самый эффективный формат с лучшим сжатием. Поддержка браузерами: 98%+. WOFF можно добавить как fallback, но обычно достаточно только WOFF2.

Оптимизация шрифтов

font-display: swap

Показывает текст системным шрифтом, пока кастомный загружается. Предотвращает FOIT (Flash of Invisible Text) — когда текст невидим до загрузки шрифта.

Предзагрузка (preload)

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Говорит браузеру начать загрузку шрифта раньше, до обработки CSS. Улучшает LCP.

Субсеттинг

Удаление неиспользуемых символов из шрифта. Если сайт на русском — оставьте кириллицу и латиницу, удалите арабские, китайские и другие символы. Размер файла уменьшается с 200+ КБ до 30–50 КБ.

Минимум начертаний

Каждое начертание (Regular, Bold, Italic) — отдельный файл. Используйте не более 2–3 начертаний. Для большинства сайтов достаточно Regular (400) и Bold (700).

Лицензии на шрифты

• Google Fonts — все шрифты бесплатны для коммерческого использования (лицензии Apache 2.0, OFL)
• Adobe Fonts — включены в подписку Creative Cloud (нельзя использовать без подписки)
• Коммерческие шрифты — требуют лицензию для веба (webfont license), цена зависит от количества просмотров/доменов
• Бесплатные альтернативы — fontsquirrel.com, fontshare.com — качественные бесплатные шрифты

Рекомендуемые шрифты для бизнес-сайтов

• Inter — универсальный без засечек, отличная читаемость на экранах
• Montserrat — современный, подходит для заголовков
• Open Sans — нейтральный, хорошо читается в длинных текстах
• Roboto — шрифт Google, универсальный
• PT Sans / PT Serif — российские шрифты с отличной кириллицей

Нужна помощь с типографикой сайта? Обращайтесь в DZ Digital — подберём шрифт и оптимизируем подключение.