Адрес fonts.googleapis.com вы, скорее всего, увидели в отчёте PageSpeed, на вкладке Network или в списке ресурсов, блокирующих отображение. Это домен, с которого браузер забирает CSS Google Fonts: стили с правилами @font-face и ссылками на сами файлы шрифтов. Пока этот CSS не загружен, браузер не может нормально нарисовать текст, а у посетителей из России соединение с серверами Google по моей практике бывает заметно медленнее, чем с хостингом самого сайта. Ниже расскажу, как это устроено, как найти такой запрос на своём сайте и чем его заменить.
Google Fonts и fonts.googleapis.com: что отдаёт этот домен
Когда вы выбираете шрифт на Google Fonts, сервис выдаёт строку подключения. Обычно это такой блок в head:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">Здесь участвуют два домена, и путать их не стоит. Первый, fonts.googleapis.com, отдаёт таблицу стилей. Второй, fonts.gstatic.com, отдаёт сами файлы шрифтов в формате woff2.
| Домен | Что отдаёт | Блокирует отрисовку страницы |
|---|---|---|
| fonts.googleapis.com | CSS с правилами @font-face | Да, это стили в head |
| fonts.gstatic.com | Файлы woff2 | Нет, но текст ждёт их или показывается запасным шрифтом |
CSS от Google подстраивается под браузер. Современному Chrome приходит woff2, старым браузерам другие форматы. Кроме того, шрифт нарезан на подмножества с unicode-range: отдельно кириллица, отдельно латиница, отдельно расширенная латиница. Браузер скачивает только те куски, символы которых есть на странице.
Поэтому на русскоязычном сайте цепочка получается такой: сначала запрос к fonts.googleapis.com, потом разбор CSS, потом запросы к fonts.gstatic.com за кириллическим и латинским файлами. Каждый шаг ждёт предыдущего.
Почему подключение к Google Fonts тормозит страницу у посетителей из России
Медленный первый запрос к чужому домену это не одна проблема, а несколько, которые складываются.
Два лишних соединения до первого символа
Для каждого нового домена браузер делает DNS-запрос, устанавливает TCP-соединение и проходит TLS-рукопожатие. Для fonts.googleapis.com и fonts.gstatic.com это два набора таких операций. Если сервер далеко или маршрут нестабилен, каждая операция растягивается, и задержки суммируются.
CSS блокирует отрисовку
Таблица стилей в head блокирует рендер: браузер не показывает страницу, пока не получит CSS. Когда fonts.googleapis.com отвечает долго, посетитель смотрит на белый экран, хотя ваш HTML и ваши стили уже пришли. Если запрос вообще завис, браузер ждёт таймаут.
Общего кэша шрифтов больше нет
Раньше аргументом за Google Fonts был общий кэш: шрифт Inter якобы уже лежит у посетителя от другого сайта. С 2020 года браузеры разделяют кэш по сайтам, поэтому на ваш домен шрифт всё равно скачивается заново. Этот довод давно не работает.
Доступность из российских сетей
Я не утверждаю, что Google Fonts заблокирован, и вам не советую так писать. По моей практике картина другая: у одних провайдеров и на мобильном интернете запрос проходит нормально, у других висит секундами, и это меняется в течение дня. Для сайта с оплатой это неприятно вдвойне. На проекте с WooCommerce и оплатой через T‑Bank страница оформления заказа и так грузит платёжный скрипт и виджет СДЭК, и лишний внешний CSS на этом фоне ощущается особенно заметно. Что-то одно из этого вы контролируете, а Google Fonts нет.
Передача данных посетителя
Каждый запрос к Google передаёт туда IP-адрес посетителя и данные браузера. Если сайт собирает персональные данные россиян, этот пункт стоит обсудить с юристом: при локальном хранении шрифтов вопрос просто снимается.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как найти запрос к серверу Google Fonts на своём сайте
Прежде чем что-то переносить, нужно понять, откуда берётся подключение. Шрифты на сайте тянут не только вы: тема, плагин конструктора страниц, виджет, стороннее расширение.
Через DevTools
Я открываю страницу в Chrome, жму F12 и иду на вкладку Network. Включаю «Disable cache», в фильтре пишу fonts.g и перезагружаю страницу. В списке появятся запросы к обоим доменам. Колонка Initiator показывает, какой файл их инициировал: ваш HTML, CSS-файл темы или скрипт плагина. Для проверки на медленном соединении переключаю Throttling на «Slow 4G» и сравниваю время загрузки с включённым и выключенным шрифтом.
Через PageSpeed Insights
В отчёте PageSpeed смотрю пункты про ресурсы, блокирующие отображение, и про цепочку критических запросов. Если там стоит fonts.googleapis.com, значит CSS шрифтов находится на критическом пути.
Поиском по коду
На WordPress самый быстрый способ найти источник это поиск по файлам. По SSH или в терминале хостинга:
grep -rl "fonts.googleapis.com" wp-content/themes wp-content/pluginsКоманда выведет файлы, в которых есть этот адрес. Часто это тема, а ещё часто набор плагинов с собственными подключениями: один и тот же шрифт может загружаться дважды из разных мест. Ещё одно место, которое забывают проверить, это директива @import внутри CSS: она добавляет к цепочке ещё один шаг.
На Tilda и других конструкторах ищу строку в исходном коде опубликованной страницы (Ctrl+U). Если подключение добавлено вручную в код head, оно будет видно прямо там, и его можно найти по этой строке.
Если самостоятельно разбираться со слоями темы и плагинов некогда, это решается задачей на техподдержку. Техподдержку сайта я веду от 15 000 ₽/мес, в рамках неё такие вещи правятся между делом.
Локальные шрифты вместо Google Fonts: как перенести woff2 на свой хостинг
Самое надёжное решение: отдавать шрифты с того же домена, что и сайт. Тогда нет ни лишнего DNS-запроса, ни TLS-рукопожатия, ни зависимости от маршрута до Google. Лицензии большинства шрифтов Google Fonts открытые, но у конкретного шрифта лицензию стоит прочитать, прежде чем выкладывать файлы.
Шаг 1. Скачать файлы
Можно воспользоваться сервисами-помощниками вроде google-webfonts-helper, которые собирают архив с woff2. Можно взять файлы напрямую: CSS по тому же адресу, что вы вставляли в сайт, отдаёт ссылки на каждый файл. Запрашиваю его с заголовком браузера, чтобы пришёл woff2:
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36" "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"В ответе будут блоки @font-face с адресами на fonts.gstatic.com. Нужны те, что помечены подмножествами cyrillic и latin. Остальные подмножества, например греческое или вьетнамское, на русском сайте не нужны.
Шаг 2. Положить на хостинг и описать в CSS
Файлы кладу, например, в папку /fonts/ на хостинге сайта. Отдельный сервер для этого не нужен, обычного хостинга достаточно. В CSS описываю шрифт:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-cyrillic-400.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}Такой же блок нужен для латиницы и для каждого начертания (400, 700). Свойство font-display: swap говорит браузеру сразу показать текст запасным шрифтом и подменить его, когда файл догрузится. Страница при этом не остаётся пустой.
Шаг 3. Предзагрузить основной файл
Для главного начертания, которое видно сразу, добавляю в head предзагрузку:
<link rel="preload" href="/fonts/inter-cyrillic-400.woff2" as="font" type="font/woff2" crossorigin>Атрибут crossorigin обязателен, даже когда файл с вашего же домена: без него браузер скачает шрифт дважды. Предзагружаю только один-два файла, иначе они начнут мешать другим ресурсам.
Шаг 4. Убрать старое подключение
Последний шаг нужен, чтобы запрос к fonts.googleapis.com действительно исчез. На WordPress для этого нужно найти, какой именно файл темы или плагина ставит стиль в очередь, и отключить его. Название стиля (handle) у каждой темы своё, поэтому гадать не стоит: смотрите его в коде, который нашёл поиск из предыдущего раздела. Многие плагины и темы имеют в настройках отдельную опцию загрузки шрифтов с собственного сервера, и тогда править код не нужно. Для кеша файлов woff2 на Apache я выставляю срок хранения около года через mod_expires, шрифты меняются редко.
Если проект на Next.js или с npm-сборкой
Здесь всё проще. Модуль next/font/google скачивает шрифт на этапе сборки и отдаёт его с вашего домена, так что в браузере запросов к Google нет. Для остальных проектов подойдёт пакет Fontsource: npm install @fontsource/inter, затем import '@fontsource/inter/cyrillic-400.css'.
Если убрать подключение нельзя: preconnect, display=swap и меньше начертаний
Бывает, что подключение завязано на плагин или клиент настаивает на своём варианте. Тогда я снижаю потери, а не устраняю причину.
| Вариант | Что убирает | Что остаётся |
|---|---|---|
| Локальные woff2 | Оба внешних домена, DNS и TLS до Google | Нужно один раз перенести файлы и поправить CSS |
| preconnect + display=swap | Часть ожидания: соединения устанавливаются раньше, текст виден сразу | Зависимость от доступности Google и передача IP посетителя |
| Системные шрифты | Все запросы за шрифтами | Отличается внешний вид, дизайн придётся согласовать |
Что конкретно делаю в варианте с оставленным подключением:
- Добавляю
preconnectк обоим доменам, у fonts.gstatic.com с атрибутомcrossorigin, как в первом примере статьи. - Проверяю, что в ссылке стоит
display=swap, иначе текст может быть невидим, пока шрифт не загрузится. - Оставляю минимум начертаний. Часто на сайте реально используется 400 и 700, а подключено шесть.
- Убираю дубли: одно семейство шрифтов не должно приходить и от темы, и от плагина.
После любого варианта замеряю результат так же, как до правок: DevTools с замедленным соединением и повторный прогон PageSpeed. Без замера нельзя сказать, помогло или нет, а смотреть нужно именно на то, исчезли ли запросы к fonts.googleapis.com из колонки Initiator.
Условия и возможности Google Fonts и доступность сервисов Google из российских сетей меняются, поэтому перед запуском я проверяю их замерами и документацией Google.
Частые вопросы
Можно ли просто удалить строку подключения fonts.googleapis.com?
Можно, но тогда браузер подставит запасной шрифт из системы, и внешний вид сайта изменится. Если нужен тот же шрифт, сначала перенесите его на свой хостинг и пропишите @font-face, а потом убирайте старое подключение. Проверьте также, не подтягивают ли его плагины или тема: удаление одной строки в head ничего не даст, если запрос идёт из другого места.
Заблокирован ли Google Fonts в России?
Однозначного ответа у меня нет, и выдавать догадку за факт я не хочу. По моей практике доступность зависит от провайдера, типа соединения и времени суток: где-то всё грузится нормально, а где-то запрос к Google задерживается. Надёжнее не гадать, а замерить загрузку из сети, которой пользуются ваши посетители, и по возможности перейти на локальные шрифты.
Не нарушает ли лицензию хранение шрифтов Google Fonts на своём хостинге?
Большинство шрифтов в каталоге распространяются по открытым лицензиям, которые разрешают самостоятельную раздачу. Но лицензия задана для каждого шрифта отдельно, поэтому перед переносом откройте страницу нужного шрифта и прочитайте её условия. Если сомневаетесь, консультация юриста обойдётся дешевле, чем разбирательство.
Как понять, какой плагин WordPress подключает Google Fonts?
Откройте DevTools, вкладку Network, отфильтруйте запросы по fonts.g и посмотрите колонку Initiator: там будет видно, какой файл инициировал запрос. Второй способ это поиск по папкам wp-content/themes и wp-content/plugins командой grep, как показано выше. После отключения подключения у плагина проверьте страницу ещё раз: иногда один и тот же шрифт тянут сразу два расширения.