Как разместить Google Fonts локально в WordPress

Загрузка Google Fonts с серверов Google создаёт стороннее подключение, которое передаёт IP-адреса посетителей. Для сайтов, обслуживающих посетителей из ЕС, это вызывает вопросы соответствия GDPR. Локальное размещение полностью устраняет это подключение и даёт вам контроль над кешированием и доставкой.

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

Зачем размещать Google Fonts локально?

Когда посетители загружают ваш сайт, их браузер получает шрифты с fonts.googleapis.com и fonts.gstatic.com. Каждый запрос отправляет их IP-адрес на серверы Google.

Локальное размещение переносит файлы шрифтов на ваш сервер. Преимущества включают:

• Соответствие требованиям конфиденциальности: Нет передачи данных третьим лицам, которую нужно документировать или обосновывать
• Контроль производительности: Устанавливайте собственные заголовки кеширования и используйте предзагрузку
• Надёжность: Нет зависимости от внешних сервисов

Разница в производительности между CDN Google и хорошо настроенным локальным решением обычно минимальна. Основным драйвером для большинства сайтов является соответствие GDPR, а не скорость.

Блочные темы: используйте встроенную библиотеку шрифтов

WordPress 6.5+ включает библиотеку шрифтов, которая загружает и раздаёт шрифты локально. Это самый простой подход для блочных тем.

Шаги:

1. Перейдите в Внешний вид → Редактор
2. Откройте Стили (верхний правый угол) → Типографика
3. Нажмите Управление шрифтами → Установить шрифты
4. Найдите нужный шрифт, выберите необходимые начертания и нажмите Установить

WordPress загружает файлы WOFF2 в wp-content/fonts/ и регистрирует их в конфигурации вашей темы. После установки внешние подключения не происходят.

Ограничения: Это работает только с блочными темами. Классические темы требуют ручной реализации.

Классические темы: ручная реализация

Для классических тем вам нужно загрузить шрифты и написать CSS самостоятельно.

Загрузка и конвертация файлов шрифтов

1. Посетите Google Fonts, выберите шрифт и загрузите его
2. Если загруженные файлы в формате TTF, конвертируйте их в WOFF2 с помощью google-webfonts-helper или Transfonter
3. Загрузите файлы в вашу тему: wp-content/themes/your-theme/fonts/

Регистрация шрифтов через CSS

Добавьте это в style.css вашей темы или в пользовательскую таблицу стилей:

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

Ключевые свойства:

• font-display: swap: Сразу показывает резервный текст, затем заменяет его при загрузке шрифта. Предотвращает невидимый текст.
• font-weight: 100 900: Для вариативных шрифтов объявляет полный диапазон начертаний в одном файле.

Для статических шрифтов создайте отдельные правила @font-face для каждого используемого начертания.

Применение шрифта

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Всегда включайте системные резервные шрифты.

Отключение удалённой загрузки

Проверьте, что удалённые шрифты не загружаются, открыв DevTools (F12), перейдя на вкладку Network, отфильтровав по Font и перезагрузив страницу. Ищите запросы к fonts.gstatic.com.

Если ваша тема загружает Google Fonts удалённо, проверьте её настройки на наличие опции отключения. В противном случае вам может потребоваться удалить таблицу стилей из очереди в functions.php или использовать плагин типа Disable and Remove Google Fonts.

Альтернативные плагины

Несколько плагинов автоматизируют локальное размещение шрифтов:

• OMGF (Optimize My Google Fonts): Автоматически обнаруживает и загружает шрифты
• Local Google Fonts: Аналогичная функциональность с поддержкой подмножеств
• WP Rocket: Включает опцию в один клик в настройках Media

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

Лучшие практики

Предпочитайте WOFF2: Он обеспечивает примерно на 30% лучшее сжатие, чем WOFF, и поддерживается более чем 97% браузеров. Пропускайте старые форматы, если вам не нужна поддержка IE11.

Используйте вариативные шрифты, когда доступны: Один файл покрывает все начертания, уменьшая количество HTTP-запросов.

Используйте предзагрузку умеренно: Предзагружайте только шрифты, используемые в видимой части страницы:

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

Включайте crossorigin условно: Добавляйте его только если ваш сервер отправляет соответствующие заголовки CORS.

Избегайте @import: Он блокирует рендеринг. Используйте теги <link> или @font-face вместо этого.

Заключение

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

Локальное размещение даёт вам полный контроль над доставкой шрифтов и устраняет передачу данных третьим лицам. Реализация занимает минуты, а результат — более чистый и конфиденциальный сайт.

Часто задаваемые вопросы

Нужно ли мне размещать Google Fonts локально, если мой сайт не ориентирован на посетителей из ЕС?

Строго говоря, GDPR применяется к посетителям из ЕС независимо от того, где базируется ваш сайт. Если какой-либо трафик из ЕС достигает вашего сайта, локальное размещение — самый безопасный подход. Помимо соответствия требованиям, локальное размещение также устраняет зависимость от третьих лиц и даёт вам прямой контроль над кешированием и доставкой.

Могу ли я использовать библиотеку шрифтов WordPress с классической темой?

Нет. Встроенная библиотека шрифтов, представленная в WordPress 6.5, работает только с блочными темами. Для классических тем вам нужно вручную загрузить файлы WOFF2, написать собственные правила font-face в CSS и убедиться, что не осталось удалённых запросов шрифтов от вашей темы или плагинов.

Как проверить, что Google Fonts больше не загружаются с внешних серверов?

Откройте DevTools браузера клавишей F12, перейдите на вкладку Network, отфильтруйте по Font и перезагрузите страницу. Если вы видите какие-либо запросы к fonts.googleapis.com или fonts.gstatic.com, удалённые шрифты всё ещё загружаются. Проверьте настройки темы или удалите удалённую таблицу стилей из очереди в functions.php.

Следует ли включать файлы WOFF вместе с WOFF2 для более широкой поддержки браузеров?

WOFF2 поддерживается более чем 97 процентами браузеров, поэтому WOFF редко необходим. Основное исключение — если вам обязательно нужна поддержка Internet Explorer 11. Для большинства современных сайтов на WordPress раздача только WOFF2 сохраняет размер шрифтов меньшим, а объявления font-face — проще.