Как изменить шрифты сайта с помощью @font-face

Пример изменения шрифта с помощью CSS

Обеспечение соответствия шрифтов фирменному стилю — важная часть визуальной идентичности сайта. Многие конструкторы и платформы предлагают ограниченный набор шрифтов, поэтому использование @font-face и собственных веб-шрифтов — надёжный способ привести сайт к желаемому виду.

Почему стоит использовать CSS @font-face на сайте

@font-face — это CSS-правило, которое позволяет объявить пользовательский шрифт и затем применять его как обычную font-family. Главные преимущества:

Легко применять: не требуется глубоких знаний CSS — достаточно вставить готовый набор правил.
Контроль над производительностью: файлы хранятся на вашем сервере, что уменьшает количество внешних запросов и даёт вам контроль над кэшированием.
Универсальность: почти любой шрифт можно подготовить в веб-форматах и использовать.
Юридическая гибкость: вы сами проверяете лицензию и условия использования шрифта.

Важно: всегда проверяйте лицензию шрифта перед использованием на коммерческом сайте.

Как подключить кастомный шрифт через @font-face

Загрузка CSS в интерфейс сервера

Ниже — подробный рабочий план от поиска шрифта до его применения на странице.

1. Найдите подходящий шрифт

Страница с примером шрифта на DaFont

Ищите шрифт на ресурсах, которые указывают лицензию для использования (например, DaFont для некоторых шрифтов, Google Fonts для свободных шрифтов). Если у вас есть образец шрифта, используйте инструменты распознавания (например, Font Squirrel идентификацию по изображению) — это поможет найти похожие варианты.

Советы при выборе:

Учитывайте читаемость на экране при выбранных размерах.
Проверьте наличие кириллицы, если сайт на русском.
Убедитесь, что лицензия позволяет веб‑использование.

2. Конвертируйте шрифт в веб-форматы

Скачанный шрифт перед конвертацией

Для совместимости браузеров шрифт лучше подготовить как минимум в форматах WOFF и WOFF2. Font Squirrel и другие конвертеры создают «kit», включающий несколько форматов и пример CSS. Алгоритм:

Разархивируйте скачанный файл шрифта.
Загрузите исходный файл на конвертер (Upload Font).
Подтвердите, что у вас есть права на использование шрифта.
Скачайте пакет webfont (Download Your Kit) и разархивируйте его.

Проверьте внутри пакета: должны быть файлы .woff и .woff2, а также stylesheet.css с примером @font-face.

3. Загрузите веб-шрифт на сервер

Загрузка веб-шрифта на сервер через файловый менеджер хостинга

Поместите файлы шрифта в логичное место в структуре сайта. Для WordPress подходящий путь — wp-content/Fonts или wp-content/uploads/fonts. Используйте FTP-клиент или встроенный файловый менеджер хостинга.

Рекомендации:

Дайте папке читаемое имя, например Fonts или webfonts.
Не храните шрифты в директории с приватными файлами.
Проверьте права доступа: файлы должны быть доступны для чтения веб-сервером.

4. Добавьте правило @font-face в CSS

Фрагмент stylesheet.css с примером @font-face

Откройте stylesheet.css из пакета webfont и отредактируйте путь к файлам, если нужно. Пример шаблона (замените значения на свои):

@font-face {
  font-family: 'MyCustomFont';
  src: url('/wp-content/Fonts/MyCustomFont.woff2') format('woff2'),
       url('/wp-content/Fonts/MyCustomFont.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

Пояснения:

font-family — имя, под которым вы будете использовать шрифт в CSS.
src — относительный путь к файлам. Относительный путь часто начинается с “/“ (от корня сайта).
font-weight можно указать диапазоном для вариативных шрифтов или конкретными значениями для отдельных файлов.
font-display: swap рекомендуем по скорости отображения (фолбэк шрифт заменится, когда кастомный загрузится).

Где вставить правило:

В файле стилей темы (style.css) или в дополнительном CSS (Customizer) для WordPress.
В общем CSS проекта для других платформ.

Важное замечание: используйте примерный CSS из пакета, если он уже адаптирован под выбранный шрифт.

5. Примените font-family к элементам сайта

Пример добавления правила font-family в CSS

Найдите CSS-классы или ID элементов, к которым нужно применить шрифт. Пример для основного текста:

body {
  font-family: 'MyCustomFont', system-ui, Arial, sans-serif;
}

h1, h2, .site-title {
  font-family: 'MyCustomFont', Georgia, serif;
}

Если шрифт не применяется:

Проверьте путь в src и наличие файлов на сервере.
Убедитесь, что селектор имеет достаточную специфичность и правило не переопределяется.
Используйте инспектор браузера (DevTools), чтобы увидеть, какие правила применяются и какие файлы загружаются.

Другие способы подключить шрифты

Google Fonts или другие CDN предлагают быстрый и простой доступ к библиотекам шрифтов.
Сторонние сервисы (Adobe Fonts/Typekit) предоставляют дополнительные возможности лицензирования и кастомизации.

Плюсы CDN: простота и быстрый кэш в распределённых точках. Минусы: зависимость от стороннего сервиса и дополнительные внешние запросы.

Когда @font-face не подходит

Лицензия шрифта запрещает хранение или распространение веб-версии — используйте легальные альтернативы.
Очень ограниченный бюджет на хранение и доставку шрифтов (в редких случаях CDN может быть экономичнее).
Требуются функции сервиса (например, продвинутый менеджмент подписок шрифтов), которых нет у локального решения.

Альтернативные подходы и когда их выбрать

Google Fonts — когда нужен быстрый доступ к популярным шрифтам и простота внедрения.
Adobe Fonts — когда нужна лицензированная коллекция и интеграция с дизайнерскими инструментами.
Система переменных шрифтов (variable fonts) — когда нужна экономия трафика и множество начертаний в одном файле.

Пошаговый чеклист для внедрения (роль-задачи)

Дизайнер:

Выбрал шрифт и подтвердил соответствие фирменному стилю.
Проверил наличие кириллицы и начертаний.
Убедился в лицензии.

Разработчик:

Конвертировал шрифт в WOFF/WOFF2.
Разместил файлы в логичной папке на сервере.
Добавил корректный @font-face в CSS.
Применил font-family и проверил отображение в ключевых браузерах.

Тестировщик:

Проверил загрузку шрифтов в мобильных и десктопных браузерах.
Убедился в корректном резервном отображении (fallback).
Проверил влияние на CLS и LCP (основные метрики производительности).

Мини‑методология внедрения (SOP)

Выбрать шрифт, подтвердить лицензию.
Сконвертировать в веб‑форматы.
Загрузить на сервер в директорию webfonts.
Добавить @font-face и задать font-display: swap.
Применить font-family к основным селекторам.
Тестировать: доступность, производительность, кроссбраузерность.
Развернуть изменения в продакшн после проверки.

Факто‑бокс: ключевые рекомендации

Всегда включайте WOFF2 и WOFF для лучшей поддержки и размера.
Используйте font-display: swap для минимизации FOUT/FOIT.
Проверьте лицензию — это важнее технических деталей.
Храните шрифты в отдельной папке и контролируйте кэш заголовками сервера.

Критерии приёмки

Кастомный шрифт загружается и применяется на главных страницах.
Нет критических регрессий в верстке (перекрытие, некорректные переносы).
Время первого отрисованного текста (First Contentful Paint) не ухудшилось существенно.
Текст остаётся доступным (семантика, размеры, контраст).

Советы по отладке и частые проблемы

404 при загрузке шрифта — проверьте путь и права доступа.
Неверная кодировка символов — проверьте, поддерживает ли шрифт нужные глифы.
Конфликты стилей — используйте более специфичные селекторы или !important как крайний вариант.
Большой размер файлов — рассмотрите subset’ирование шрифта (оставить только нужные глифы).

Безопасность и конфиденциальность

Хранение шрифтов локально уменьшает количество внешних запросов и помогает соблюдать требования к конфиденциальности (GDPR), так как данные о пользователях не передаются сторонним CDN.
Если используете сторонний CDN, проверьте политику конфиденциальности провайдера и возможные передачи IP/пагинационных данных.

Пример дорожной карты внедрения на проекте (высокоуровнево)

Подготовка: выбор шрифта и проверка лицензии (1–2 дня).
Техническая подготовка: конвертация и загрузка, добавление CSS (0.5–1 день).
Тестирование: кроссбраузерность и производительность (1 день).
Релиз и мониторинг (0.5 дня).

Примеры ошибок и варианты их исправления

Ошибка: шрифт не отображается только в Safari на iOS — проверьте поддержку формата и корректный порядок src (woff2, woff).
Ошибка: текст «прыгает» при загрузке шрифта — используйте font-display: swap и резервный шрифт с близкой метрикой.
Ошибка: отсутствуют символы кириллицы — выберите шрифт с поддержкой нужных наборов или используйте fallback.

Короткая памятка по производительности

Отдавайте приоритет WOFF2 как самому экономичному формату.
Используйте кэширование на стороне сервера (Cache-Control, ETag).
Субсетируйте шрифт, если сайт использует ограничённый набор символов.

Глоссарий в одну строку

@font-face — CSS‑правило для объявления и подключения пользовательского веб‑шрифта.
WOFF/WOFF2 — распространённые сжатые веб‑форматы шрифтов.
font-display — директива управления поведением отображения при загрузке шрифта.

Короткое резюме

@font-face — надёжный способ обеспечить фирменные шрифты на сайте без зависимости от внешних CDN. Процесс включает выбор шрифта, проверку лицензии, конвертацию в веб‑форматы, загрузку на сервер, подключение через @font-face и применение font-family к элементам. Тщательно тестируйте и учитывайте производительность.

Важно: перед любым массовым обновлением стилей сделайте бэкап CSS и протестируйте изменения на тестовой среде.