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

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

@font-face — это CSS-правило, которое подключает веб-шрифты прямо в ваши стили. Определение: @font-face связывает имя шрифта с файлом шрифта, доступным по URL.

Преимущества:

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

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

Краткий план действий

1. Найдите подходящий шрифт и проверьте лицензию.
2. Конвертируйте шрифт в веб-форматы (woff, woff2 и т. п.).
3. Загрузите файлы на сервер в отдельную папку.
4. Добавьте правило @font-face в CSS с корректными путями.
5. Примените font-family к нужным элементам.

Детальная пошаговая инструкция

1. Поиск шрифта

Начните с выбора шрифта. Источники:

• Бесплатные каталоги: DaFont, Font Squirrel, Google Fonts (для сравнения лицензионной модели).
• Платные магазины: MyFonts, Adobe Fonts — бывают коммерческие лицензии с расширенными правами.

Совет: если у вас есть изображение со шрифтом — используйте инструмент идентификации на Font Squirrel.

Определение: webfont — термин для шрифта, оптимизированного для показа в браузере (форматы woff/woff2 рекомендуются).

2. Конвертация в веб-форматы

Инструмент: Font Squirrel Webfont Generator.

Шаги:

• Распакуйте исходный архив шрифта.
• Загрузите файл .ttf или .otf в генератор.
• Подтвердите, что у вас есть права на использование.
• Скачайте сгенерированный набор — в нём будет stylesheet и форматы woff/woff2/ect.

Форматы для памяти:

• woff2 — лучший компромисс сжатия и поддержки в современных браузерах.
• woff — запасной вариант для старых браузеров.
• ttf/otf — исходные форматы, не всегда оптимальны для веба.
• eot/svg — поддержка очень старых браузеров, редко нужна.

3. Загрузка шрифтов на сайт

Создайте в корне сайта понятную папку, например /wp-content/Fonts/ или /assets/fonts/. Загрузите туда файлы woff и woff2. При использовании WordPress удобнее положить в wp-content или тему: wp-content/themes/ВАША_ТЕМА/fonts/.

Совет по безопасности: выставляйте корректные права на файлы (обычно 644) и избегайте размещения шрифтов в публично незащищённых папках, если лицензия этого не допускает.

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

Откройте файл stylesheet.css из пакета Font Squirrel или создайте отдельный блок в вашем основном CSS (например, style.css или custom.css). Вставьте правило @font-face и поправьте пути к файлам относительно корня сайта.

Пример универсального блока @font-face (адаптируйте путь к вашей папке):

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

Пояснения к свойствам:

• font-family — имя, которое вы будете указывать в font-family для элементов.
• src — список URL с приоритетом формата (woff2 первым).
• font-weight / font-style — указывайте для каждого варианта (regular, bold, italic).
• font-display — контролирует стратегию отображения (swap, fallback, optional); swap обычно оптимален для UX.

Важно: не включайте полный локальный путь (C:…), используйте относительный URL от корня сайта.

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

После определения шрифта в @font-face применяйте его через CSS:

body {
  font-family: 'Kaiju Monster', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2 { 
  font-family: 'Kaiju Monster', Georgia, serif;
}

Если изменения не видны — проверьте:

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

Частые проблемы и как их решить

• Шрифт не загружается: проверьте 404 при запросе файла в сетевом табе DevTools.
• Шрифт грузится, но не применяется: проверьте селекторы и приоритеты CSS; используйте инструмент вычисления стилей.
• Мигающий текст (FOIT): настроите font-display: swap, чтобы показывать запасной шрифт до загрузки веб-шрифта.
• Ошибки лицензии: если шрифт запрещает хостинг, используйте лицензионные решения или Google Fonts.

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

• Google Fonts CDN: проще в настройке, но вы зависите от стороннего сервиса и его политики.
• Adobe Fonts: удобная интеграция для дизайнеров, но платная и требует учётной записи.
• Base64-линковка: встраивание шрифта в CSS через data URI. Удобно для мелких наборов, но увеличивает размер CSS и мешает кэшированию.

Плюс self-hosting: контроль производительности и приватности. Минус: ответственность за лицензию и оптимизацию.

Методика принятия решения (мини-методология)

1. Требование дизайна: нужен ли уникальный шрифт или подойдёт стандартный веб-шрифт?
2. Лицензия: разрешён ли self-hosting и коммерческое использование?
3. Производительность: допустим ли размер загрузки? Используйте woff2 и subset при необходимости.
4. Поддержка: есть ли fallback-стек шрифтов на системах пользователей?

Если ответ на все — «да», выбирайте self-hosting с @font-face. Если лицензия не позволяет — используйте CDN/платные сервисы.

Проверки и критерии приёмки

Критерии приёмки для завершённой задачи:

• Шрифт корректно загружается в хроме, Firefox, Safari на десктопе и мобильных.
• font-display установлен и страница не показывает длительную пустую область текста.
• Лицензия шрифта подтверждена и задокументирована в проекте.
• Файлы лежат в /assets/fonts/ или эквивалентной папке и имеют понятные имена.
• Тесты на производительность не показывают существенного регресса (LCP/CLS в пределах нормы для проекта).

Playbook для разработчика (SOP)

1. Подготовка: получить исходный файл шрифта и лицензию.
2. Конвертация: использовать Font Squirrel и выбрать опцию оптимального сжатия.
3. Загрузка: поместить файлы в /assets/fonts/ (или в wp-content/Fonts/).
4. Подключение: добавить @font-face в основной CSS и проверить пути.
5. Применение: обновить базовые CSS-правила (body, h1–h6, .site-title).
6. Тестирование: проверить в нескольких браузерах, на мобильных, прогнать Lighthouse.
7. Документация: сохранить копию лицензии и заметку о версии шрифта в репозитории.
8. Откат: если производительность упала — временно отключить кастомный шрифт и использовать системный стек.

Инструменты для тестирования и контроль качества

• DevTools Network — проверить загрузку файлов и коды ответа.
• Lighthouse — проверить влияние на показатели производительности.
• Browserstack / локальные устройства — кроссбраузерная проверка.
• Инструменты для субсеттинга шрифта (glyphhanger, pyftsubset) — уменьшить размер.

Чек-лист ролей

Дизайнер:

• Выбрал шрифт и подтвердил наличие лицензии.
• Предоставил список весов и стилей, которые нужны на сайте.

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

• Сконвертировал шрифт в woff/woff2.
• Разместил файлы на сервере в согласованной папке.
• Добавил @font-face и применил правила в стилях.
• Протестировал отображение и производительность.

Контент-менеджер:

• Проверил, как шрифт влияет на читаемость текста.
• Обновил шаблоны/виджеты при необходимости.

Системный администратор:

• Убедился в корректных правах доступа на файлы.
• Настроил кеширование и gzip/брокен compression для статических файлов.

Тест-кейсы и приёмка

• При загрузке страницы файлы шрифта возвращают HTTP 200.
• На устройстве без поддержки woff2 отображается woff.
• При отключённом JS текст остаётся читаемым и доступным.
• При ограниченной скорости сети отображается запасной шрифт, затем кастомный (swap).

Решение проблем и откат изменений

Если кастомный шрифт приводит к регрессам:

1. Отключите подключение шрифта (удалите блок @font-face или закомментируйте его).
2. Внедрите системный стек font-family, чтобы вернуть UX.
3. Проанализируйте размер шрифта и примените субсеттинг.
4. Документируйте шаги отката и причину регресса.

Совместимость и нюансы

• woff2 поддерживается современными браузерами; для старых добавляйте woff.
• Всегда указывайте запасной стек шрифтов в font-family.
• При использовании CDN учитывайте задержку DNS и политику кэша стороннего сервиса.

Модель риска и смягчения

Риск: нарушение лицензии → смягчение: проверить лицензию и при необходимости купить лицензию или выбрать другой шрифт.

Риск: ухудшение производительности → смягчение: использовать woff2, субсеттинг, font-display: swap.

Риск: визуальные артефакты на мобильных → смягчение: тестировать на реальных устройствах.

Decision flowchart

flowchart TD
  A[Нужен кастомный шрифт?] -->|Нет| B[Использовать системный стек]
  A -->|Да| C[Проверить лицензию]
  C -->|Запрещён self-host| D[Использовать CDN/покупку лицензии]
  C -->|Разрешён| E[Конвертировать в woff2/woff]
  E --> F[Загрузить в /assets/fonts/]
  F --> G[Добавить @font-face в CSS]
  G --> H[Применить font-family и протестировать]
  H --> I{Проблемы с производительностью?}
  I -->|Да| J[Субсеттинг / font-display: swap]
  I -->|Нет| K[Готово]

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

Использование @font-face даёт мощный инструмент для приведения внешнего вида сайта в соответствие с брендом. Self-hosting обеспечивает контроль и приватность, но требует внимания к лицензии и оптимизации. Следуя описанной методике и чек-листам, вы сможете подключить кастомные шрифты корректно и безопасно.

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

Короткая заметка для социальных сетей

Хотите уникальный шрифт на сайте без зависимости от CDN? Подключите webfont через @font-face: конвертируйте в woff2, загрузите в /assets/fonts/ и добавьте правило в CSS — это просто и даёт полный контроль над внешним видом.