Как разместить 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 и убедитесь, что не осталось удалённых подключений.

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

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

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.