Прогнали сайт через GTmetrix и увидели ошибки Google Fonts? Знакомая ситуация. Внешние запросы к fonts.googleapis.com тормозят загрузку, а плагины кеширования вроде WP Rocket или WP Fastest Cache не могут сжать то, что лежит на чужом сервере.

С 2022 года добавилась ещё одна причина: немецкий суд признал динамическую загрузку Google Fonts нарушением GDPR, IP посетителя передаётся на серверы Google в США без согласия. Локальный хостинг шрифтов закрывает сразу три задачи: скорость по GTmetrix, соответствие GDPR и полный контроль над кешированием.

Дальше, пошаговая инструкция. От выбора шрифта на Google Fonts до чистого отчёта GTmetrix без единой ошибки внешних ресурсов.

💡 Быстрый обзор:

• Скачайте нужные начертания шрифта с Google Fonts
• Конвертируйте.ttf в WOFF2 через Transfonter или google-webfonts-helper
• Загрузите файлы в /wp-content/uploads/fonts/ по FTP
• Пропишите @font-face в CSS темы и проверьте отображение
• Повторно протестируйте сайт в GTmetrix, ошибки Google Fonts должны исчезнуть

Почему вообще стоит загружать шрифты локально

Когда браузер загружает страницу, он идёт на fonts.googleapis.com, получает CSS, а затем тянет сами файлы шрифтов с fonts.gstatic.com. Это минимум два внешних DNS-запроса и две HTTP-сессии, на которые вы не влияете. Плагин кеширования бессилен: сжать или отложить загрузку чужого ресурса невозможно.

Локальная загрузка меняет картину. Файлы шрифтов лежат на вашем сервере, тот же домен, тот же CDN, то же кеширование. Браузер не ходит наружу, а GTmetrix и PageSpeed Insights перестают ругаться на внешние ресурсы.

И да, GDPR. В январе 2022 года земельный суд Мюнхена постановил: динамическая загрузка Google Fonts без согласия пользователя нарушает GDPR. После этого волна исков прошла по Европе, а владельцы сайтов массово перешли на локальный хостинг. Хостинг шрифтов у себя, самое надёжное решение.

Шаг 1. Выберите шрифт на Google Fonts

Заходим на Google Fonts и находим нужный шрифт. В этом руководстве я использую Roboto, один из самых популярных шрифтов в вебе, с поддержкой кириллицы.

Два правила экономии:

• Минимум начертаний. Каждое начертание (regular, bold, italic), отдельный файл и отдельный запрос. Если в дизайне используется только regular и bold, снимите галочки с остальных.
• Минимум шрифтов. Один-два шрифта на сайт. Третий, уже перебор для скорости, каким бы красивым он ни был.

Я выбрал Roboto Regular (400) и Roboto Bold (700). Всё.

Шаг 2. Скачайте шрифт

На странице шрифта нажимаем кнопку «Download family». Google упакует все начертания в ZIP-архив. На этом этапе выбор начертаний не важен, архив всё равно содержит всё семейство. Отбором займёмся дальше.

Распакуйте архив. Нам нужны файлы Roboto-Regular.ttf и Roboto-Bold.ttf.

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

Браузеры не используют.ttf напрямую. Нужны форматы WOFF и WOFF2, они сжаты и загружаются быстрее. Есть два инструмента, оба бесплатные.

Transfonter, классика: заходим на transfonter.org, жмём «Add fonts», загружаем.ttf-файлы.

Настройки оставляем по умолчанию, WOFF и WOFF2 покрывают все современные браузеры. EOT (для старых Internet Explorer) в 2026 году не нужен. Нажимаем «Convert».

Google-webfonts-helper, более современный вариант специально для Google Fonts. Сервис gwfh.mranftl.com сам генерирует и WOFF2-файлы, и готовый CSS с @font-face. Не нужно загружать шрифты на сторонний сервер, всё происходит локально в браузере. Для лицензионных шрифтов и брендовых гарнитур это критично.

Какой инструмент выбрать? Transfonter проще для разовой задачи. Google-webfonts-helper удобнее, если меняете шрифты часто или работаете с коммерческими гарнитурами, которые не хотите загружать на чужие серверы.

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

После конвертации скачиваем ZIP. Внутри, файлы.woff и.woff2 для каждого начертания. Для Roboto Regular и Bold получаем 4 файла:

Загружаем их через FTP или файловый менеджер хостинга в папку /wp-content/uploads/fonts/. Путь /wp-content/uploads/ выбран не случайно: обновления ядра и темы её не трогают, в отличие от папки темы.

После загрузки проверьте, откройте в браузере прямую ссылку на файл:

https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Браузер должен начать скачивание. Если нет, проверьте права на папку (должны быть 755) и сам путь.

Шаг 5. Пропишите @font-face в CSS

В ZIP-архиве из Transfonter есть файл stylesheet.css, это готовая заготовка для подключения шрифта. Открываем его и копируем содержимое.

Вставляем код в самый верх style.css активной темы (или custom.css, если тема его поддерживает). Путь к файлам, на боевом сервере, не из архива. Замените относительные URL на абсолютные:

Исходный код из stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Меняем на:

1
src: url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Замените ваш-сайт.com на свой домен. Повторите для каждого начертания.

Чтобы шрифтом было удобно пользоваться в вёрстке, добавьте ниже классы-обёртки:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Теперь любой элемент с классом roboto_font или roboto_bold_font будет отображаться шрифтом Roboto.

Шаг 6. Проверьте отображение

Создайте тестовую страницу (или откройте любую существующую в режиме черновика) и вставьте в текстовый редактор HTML:

1
<h2>Стандартный шрифт темы</h2>
2
<h2 class="roboto_font">Roboto Regular — пользовательский шрифт</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — жирное начертание</h2>

Откройте предпросмотр. Первый заголовок, стандартным шрифтом темы, второй и третий, Roboto.

Если шрифт не подхватился, откройте консоль браузера (F12 → Network) и проверьте, что WOFF2-файлы загружаются с вашего домена, а не с fonts.gstatic.com. Код ответа должен быть 200, тип, font/woff2.

Шаг 7. Сделайте шрифт шрифтом по умолчанию

Чтобы Roboto применялся ко всему сайту без дописывания классов каждому заголовку, добавьте в style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Осторожно: если тема уже использует кастомный шрифт, найдите в style.css строки с font-family и замените их. Прямое дописывание body-правила поверх существующего создаст конфликт, проверьте, что старые объявления удалены или закомментированы.

Шаг 8. Настройте резервный стек шрифтов

Google Fonts, не системный шрифт. Если браузер не сможет его загрузить (посетитель без интернета, блокировщик рекламы, временный сбой), страница останется без текста. Решение, стек шрифтов.

Неправильно:

1
font-family: 'Roboto';

Правильно, с резервными шрифтами:

1
font-family: 'Roboto', Arial, sans-serif;

Браузер пробует Roboto. Не вышло, берёт Arial. Нет Arial, системный sans-serif. Страница всегда читаема, даже если кастомный шрифт недогрузился.

Шаг 9. Повторно протестируйте сайт в GTmetrix

Запускаем GTmetrix заново. Раздел «Waterfall» больше не должен показывать запросов к fonts.googleapis.com и fonts.gstatic.com. Ошибка «Serve static assets with an efficient cache policy» для шрифтов тоже исчезает, потому что теперь эти активы на вашем сервере и кешируются по вашим правилам.

Если ошибки остались, проверьте вкладку Waterfall. Возможно, тема или плагин (например, Elementor) продолжают тянуть шрифты с CDN Google. Тогда поможет следующий раздел.

Альтернатива для ленивых: плагин Local Google Fonts

Если возиться с FTP и CSS не хочется, есть плагин Local Google Fonts. Он автоматически находит все Google Fonts, используемые темой и плагинами, скачивает их и раздаёт с вашего сервера.

Плюсы: установил, активировал, забыл. Минусы: работает только с Google Fonts (не с другими внешними шрифтами) и не даёт тонкого контроля над форматами. Для большинства сайтов на WordPress этого хватает с запасом.

Полезное видео по теме

На английском, но с наглядной демонстрацией каждого шага, от выбора шрифта до финального CSS:

⁉️🤔 Частые вопросы

Обязательно ли хостить шрифты локально в 2026 году?

С точки зрения закона, да, если у вас есть посетители из ЕС. Мюнхенский суд в 2022 году создал прецедент, и с тех пор десятки немецких судов подтвердили: динамическая загрузка Google Fonts без согласия = нарушение GDPR. С точки зрения скорости, тоже да: два лишних DNS-запроса и некешируемый внешний ресурс не делают сайт быстрее. Локальный хостинг шрифтов закрывает обе проблемы одновременно. Плагин Local Google Fonts справляется за 5 минут, ручной метод с Transfonter, за 15. Выбирайте по готовности заходить на FTP.

Google-webfonts-helper или Transfonter, что лучше?

Для разового подключения одного шрифта разницы почти нет. Transfonter проще: загрузил.ttf, получил WOFF2 и CSS. Google-webfonts-helper удобнее при частой смене шрифтов: он не загружает файлы на сторонний сервер и сразу генерирует готовый @font-face с правильными путями. Для коммерческих лицензионных шрифтов, только google-webfonts-helper.

Что делать, если после локальной загрузки шрифты не отображаются?

Три типичные причины. Первая, неверный путь в url(): проверьте, что ссылка открывается в браузере и отдаёт файл, а не 404. Вторая, CORS: если шрифты грузятся с CDN или поддомена, сервер должен отдавать заголовок Access-Control-Allow-Origin. Третья, конфликт с темой: откройте DevTools (F12 → Computed), найдите элемент с вашим шрифтом и посмотрите, какой font-family применяется фактически. Часто тема переопределяет его ниже в каскаде.

Можно ли хостить шрифты на CDN, а не на своём сервере?

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

Как проверить, что шрифты точно грузятся локально?

Откройте DevTools → Network → вкладка Font. Обновите страницу. Все запросы за шрифтами должны идти на ваш домен. Если видите fonts.googleapis.com или fonts.gstatic.com, где-то осталась внешняя загрузка. Скорее всего, тема или плагин продолжают её использовать, проверьте настройки или установите Local Google Fonts.

Что выбрать: ручную загрузку или плагин

Если вы дочитали до этого места, скорее всего, вам не всё равно, что происходит со скоростью сайта. И это правильно. Разница между «вроде быстро» и «GTmetrix Grade A» часто упирается именно в такие мелочи, как внешние шрифты.

Для быстрого результата устанавливайте Local Google Fonts. Пять минут, и внешние запросы к Google исчезают.

Для полного контроля над форматами, кешированием и резервными стеками, ручной метод с Transfonter или google-webfonts-helper. Те же 15 минут, но вы знаете каждый файл на сервере.

В любом случае проведите тест в GTmetrix до и после. Скриншоты «до» и «после», лучший способ убедиться, что всё сделано не зря.