Bunny Fonts WordPress: быстрая замена Google Fonts для GDPR и скорости

Что такое Bunny Fonts и почему это лучше Google Fonts

Bunny Fonts – бесплатный сервис, который предоставляет набор популярных веб‑шрифтов без трекеров и рекламных запросов. В отличие от Google Fonts, он хранит файлы на CDN с оптимизированными заголовками кеширования, а также полностью соответствует требованиям GDPR, так как не собирает персональные данные посетителей.

Для владельцев сайтов на WordPress это значит два главных преимущества:

• Сокращение времени до первого контента (TTFB) до 30 % за счёт более лёгкой загрузки шрифтов.
• Отсутствие необходимости добавлять consent‑manager для шрифтов‑трекеров.

Если вы уже оптимизируете шрифты (см. статью по оптимизации шрифтов), переход на Bunny Fonts будет естественным шагом.

Ручное подключение Bunny Fonts в WordPress

Самый надёжный способ – добавить ссылки на шрифты в functions.php темы или в плагин‑сниппет. Ниже пример кода, который регистрирует и подключает шрифт Inter из Bunny Fonts.

function bunny_fonts_enqueue() {
    // URL к CSS‑файлу Bunny Fonts (можно собрать несколько шрифтов в один запрос)
    $bunny_url = 'https://fonts.bunny.net/css2?family=inter:wght@400;600;700&display=swap';

    // Регистрация стиля без зависимости от темы
    wp_register_style( 'bunny-inter', $bunny_url, [], null );

    // Подключаем стиль в очередь
    wp_enqueue_style( 'bunny-inter' );
}
add_action( 'wp_enqueue_scripts', 'bunny_fonts_enqueue' );

После этого в файле style.css темы указываем шрифт:

body {
    font-family: 'Inter', sans-serif;
}

Важно добавить параметр display=swap – это гарантирует, что текст будет отображён сразу, а шрифт подменится по загрузке.

Подключение нескольких шрифтов за один запрос

Bunny Fonts поддерживает объединение запросов через запятую. Пример для Inter и Roboto:

$bunny_url = 'https://fonts.bunny.net/css2?family=inter:wght@400;600;700&family=roboto:wght@400;500;700&display=swap';

Такой подход уменьшает количество HTTP‑запросов и ускоряет рендеринг.

Плагины для автоматической интеграции Bunny Fonts

Если вы не хотите править код, существуют готовые решения. Ниже два проверенных плагина.

1. Bunny Fonts – Free Google Fonts Alternative – простой переключатель в настройках темы. Позволяет выбрать любой шрифт из каталога Bunny и автоматически добавит нужный @font-face в wp_head.
2. Asset CleanUp: Page Speed Booster – в разделе «CSS & JS» можно заменить URL‑ы Google Fonts на ссылки Bunny. Плагин также умеет отложенную загрузку и объединение файлов, что полезно, если вы уже читаете CSS/JS оптимизацию.

Оба плагина совместимы с большинством популярных тем и кэш‑плагинов (WP Rocket, LiteSpeed Cache).

Настройка плагина «Bunny Fonts»

После установки перейдите в Настройки → Bunny Fonts. Выберите нужный шрифт, задайте вес и стиль, включите display=swap. Плагин автоматически вставит код, аналогичный приведённому выше, в очередь стилей.

Оптимизация загрузки и соблюдение GDPR

Быстрое подключение шрифтов – только часть задачи. Чтобы полностью соответствовать GDPR, необходимо убедиться, что запросы к CDN не передают IP‑адреса в страны, где требуется согласие.

• Включите Cache-Control: public, max‑age=31536000 в заголовках сервера (обычно уже настроено на CDN Bunny).
• Если ваш сайт работает в ЕС, разместите Uptime‑мониторинг и проверьте, что запросы к fonts.bunny.net не вызывают блокировок.
• Для дополнительного уровня конфиденциальности используйте preconnect и dns-prefetch в <head>:

  <link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
  <link rel="dns-prefetch" href="https://fonts.bunny.net">
  

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

Отложенная загрузка шрифтов

Если хотите ещё больше ускорить первую отрисовку, можно загрузить шрифты асинхронно через JavaScript. Ниже минимальный скрипт, который вставит <link> после события DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://fonts.bunny.net/css2?family=inter:wght@400;600;700&display=swap';
    document.head.appendChild(link);
});

Скрипт можно добавить через wp_enqueue_script или в footer.php. Такой подход совместим с большинством кэш‑плагинов и не нарушает GDPR.

Тестирование и проверка скорости

После внедрения Bunny Fonts проверьте реальное влияние на метрики:

• Google PageSpeed Insights – обратите внимание на Render‑blocking resources и Largest Contentful Paint (LCP).
• GTmetrix – сравните Fully Loaded Time до и после.
• WebPageTest – включите опцию «Waterfall» и убедитесь, что запрос к fonts.bunny.net занимает менее 100 мс.

Если LCP не падает ниже 2,5 сек, попробуйте объединить шрифты с другими CSS‑файлами (см. CSS/JS оптимизацию) или включить rel="preload" для критических наборов.

Пример preload для Inter

<link rel="preload" href="https://fonts.bunny.net/css2?family=inter:wght@400;600;700&display=swap" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.bunny.net/css2?family=inter:wght@400;600;700&display=swap"></noscript>

Эта техника гарантирует, что шрифт начнёт загружаться до рендера, но не блокирует отрисовку.

Заключение

Перейти от Google Fonts к Bunny Fonts в WordPress – это простой способ ускорить сайт, сократить количество запросов и обеспечить полное соответствие GDPR без дополнительных плагинов согласия. Вы можете выбрать ручной метод с functions.php для полной гибкости или воспользоваться готовыми плагинами, если предпочтете «нажми‑и‑готово». Не забывайте проверять метрики после внедрения и использовать инструменты оптимизации, описанные в наших других руководствах, чтобы достичь идеального баланса скорости и пользовательского опыта.