Когда вы прогоняете сайт через PageSpeed Insights, один из частых диагнозов, «Ensure text remains visible during webfont load». На русском это звучит как «Обеспечьте видимость текста во время загрузки веб-шрифтов». Проблема знакома каждому, кто ставил Elementor, Astra или подключал Google Fonts: пока браузер качает файл шрифта, текст на странице просто отсутствует. Белый экран вместо заголовка, доли секунды пустоты, и посетитель уже ушёл.

Технически это называется FOIT (Flash of Invisible Text). Корень проблемы, в директиве font-display, которую браузер использует по умолчанию. Без явного указания font-display: swap браузер ждёт загрузки шрифта и не показывает текст, пока файл не получен. А если шрифт грузится с CDN, через сторонний домен, задержка накапливается, и PageSpeed Insights фиксирует предупреждение.

Решается это двумя вещами: во-первых, каждому @font-face нужно добавить font-display: swap, тогда браузер сразу покажет текст системным шрифтом и «подменит» его на кастомный, когда тот загрузится. Во-вторых, критически важные шрифты (тот, которым набран заголовок в первом экране) стоит предзагрузить через <link rel="preload">. Ниже, пошаговый разбор, как сделать это в WordPress с учётом плагинов вроде Elementor и тем типа Astra.

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

• Открываем отчёт PageSpeed Insights и выписываем проблемные шрифты из диагностики
• Отключаем стили плагинов и темы через wp_dequeue_style в functions.php
• Копируем файлы шрифтов в локальную папку и пересоздаём font-face с font-display: swap
• Добавляем preload для одного-двух шрифтов первого экрана
• Для пользовательских шрифтов Elementor меняем путь на локальный и пересобираем CSS

Шаг 1: находим проблемные шрифты в отчёте

Запускаем аудит на PageSpeed Insights, дожидаемся результата и находим секцию диагностики. Нас интересует пункт «Обеспечьте видимость текста во время загрузки веб-шрифтов», в английском интерфейсе это «Ensure text remains visible during webfont load».

Разворачиваем список, видим конкретные URL шрифтов, которые не имеют font-display: swap. Обычно это:

• fontawesome-webfont.woff2, Font Awesome из Elementor;
• eicons.woff2, иконочный шрифт Elementor;
• Google Fonts (Open Sans, Roboto, Montserrat), если тема тянет их через CDN.

Выписываем названия файлов, они понадобятся для следующих шагов. Главное сейчас: понять, какой плагин или тема отвечает за каждый шрифт. Font Awesome и eicons идут из Elementor. Google Fonts чаще всего подключает тема, в Astra это хук astra-google-fonts.

Шаг 2: отключаем стили, которые тянут шрифты

Теперь задача, убрать стандартное подключение этих шрифтов, чтобы затем вернуть их с правильными настройками. Идём в functions.php дочерней темы (или в плагин с кодом вроде Code Snippets) и добавляем:

1
/**
2
 * Отключаем стили, загружающие проблемные шрифты
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

Приоритет 9999 важен: хук должен отработать ПОСЛЕ того, как плагины и тема зарегистрировали свои стили. Если шрифт всё ещё грузится, проверьте, не вызывает ли его другой плагин (например, меню или форма обратной связи могут подключать свою версию Font Awesome). Ищите поиском по файлам плагина строку wp_enqueue_style с соответствующим handle.

После добавления кода значок Font Awesome на сайте временно исчезнет, это нормально. Мы вернём его на шаге 4.

Шаг 3: копируем файлы шрифтов в локальную папку

Когда шрифт подключён через CDN или через плагин, браузер делает лишний DNS-запрос к стороннему домену. Локальный хостинг шрифтов снимает эту задержку. Алгоритм:

• Находим файлы шрифтов в структуре плагина. Для Font Awesome из Elementor путь будет: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Для eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Для Google Fonts, качаем .woff2 из Google Fonts CDN.

• Создаём папку /wp-content/fonts/ в корне сайта и копируем туда все нужные файлы. Достаточно форматов .woff2 (современные браузеры) и .woff (запасной вариант для старых).

• Если шрифт был подключён темой через Google Fonts CDN, качаем актуальный .woff2 вручную через прямую ссылку или с помощью плагина OMGF (о нём ниже).

Теперь у каждого шрифта есть локальный путь вида /wp-content/fonts/fontawesome-webfont.woff2. Переходим к самому важному, подключению.

Шаг 4: подключаем шрифты с font-display: swap и preload

Стили отключены, файлы на месте. Теперь прописываем @font-face с правильной директивой font-display: swap и добавляем preload для мгновенной загрузки. Код размещаем в functions.php через хук wp_head:

1
/**
2
 * Подключаем шрифты локально с font-display: swap и preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Предзагрузка критических шрифтов -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — иконочный шрифт */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — иконки Elementor */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

Приоритет 5 в wp_head означает, что preload-теги встанут в <head> одними из первых, браузер начнёт качать шрифт до того, как дойдёт до CSS. Атрибут crossorigin="anonymous" обязателен для preload шрифтов: без него браузер проигнорирует предзагрузку и скачает файл повторно.

Важный нюанс: в URL внутри @font-face не должно быть query-параметров вроде ?#iefix или ?v=4.7.0. PageSpeed Insights спотыкается о них при анализе. Ссылка должна быть чистой: /wp-content/fonts/fontawesome-webfont.woff2, и всё.

После добавления кода сбрасываем кеш (плагин кеширования + Cloudflare, если используется) и перепрогоняем PageSpeed Insights. Предупреждение о шрифтах должно исчезнуть. Иконки Font Awesome возвращаются на место, но теперь они не блокируют показ текста.

Шаг 5: пользовательские шрифты Elementor, особый случай

Если вы используете Elementor Pro с функцией «Пользовательские шрифты» (Custom Fonts), логика та же, но есть два дополнительных шага.

Первое, меняем путь к шрифту в настройках Elementor. Заходим в Elementor → Custom Fonts, открываем нужный шрифт и в поле URL указываем локальный путь /wp-content/fonts/ваш-шрифт.woff2 вместо внешнего CDN или ссылки на Google Fonts:

Второе, пересобираем CSS Elementor. После смены пути идём в Elementor → Tools → Regenerate CSS и нажимаем кнопку регенерации. Это заставит Elementor перестроить файлы стилей с новыми путями к шрифтам:

После регенерации проверяем, что в HTML страницы путь к шрифту ведёт на локальный файл, а не на CDN. Затем в header.php (или через wp_head как на шаге 4) добавляем preload для этого шрифта:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

И соответствующий @font-face с font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Альтернативный путь: плагины для автоматической оптимизации

Ручной метод даёт полный контроль, но требует внимания при обновлении плагинов (обновление Elementor может вернуть стандартное подключение шрифтов). Если хотите автоматизировать процесс, вот два плагина, которые решают задачу без правки кода.

OMGF (Optimize My Google Fonts). Бесплатный плагин, который сканирует все Google Fonts на сайте, скачивает их локально и добавляет font-display: swap автоматически. Ставите, нажимаете «Optimize», и все Google Fonts вашей темы превращаются в локальные с правильными заголовками. Pro-версия умеет работать с Adobe Fonts и любыми сторонними CDN-шрифтами.

Swap Google Fonts Display. Минималистичный плагин, который делает ровно одно: добавляет font-display: swap ко всем Google Fonts на лету. Не качает локально, но убирает предупреждение PageSpeed Insights за 10 секунд установки. Подходит как временное решение или если локальный хостинг шрифтов не критичен.

Плагины экономят время, но помните: они работают только с Google Fonts. Иконочные шрифты (Font Awesome, eicons) и кастомные шрифты Elementor они не трогают, здесь всё равно придётся пройти ручные шаги 1-5.

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

Нужно ли предзагружать ВСЕ шрифты сайта?

Нет. <link rel="preload"> имеет смысл только для одного-двух шрифтов, которые попадают в первый экран, например, шрифт заголовка H1 и шрифт основного текста. Предзагрузка десятка шрифтов даст обратный эффект: браузер потратит полосу пропускания на файлы, которые не нужны прямо сейчас, и замедлит загрузку критического контента. Предзагружайте только шрифты, используемые в first viewport. Для типичного блога это один шрифт заголовка и один текстовый, итого два woff2-файла. Иконочный шрифт предзагружать стоит, только если иконка есть в первом экране (меню, поиск). Всё остальное подтянется по мере скролла без ущерба для метрик PageSpeed.

Что делать, если после отключения стилей сайт «поехал»?

Самый частый сценарий: отключили elementor-icons, и пропали стрелки слайдера или иконка поиска. Решение, перед отключением проверьте, какие именно элементы используют шрифт. Откройте DevTools (F12), вкладка Elements, найдите иконку и посмотрите CSS-класс. Если класс начинается с fa-, это Font Awesome. Если с eicon-, это eicons. Отключайте только то, что реально используется, и локально подключайте те же файлы, визуально ничего не изменится. Сайт «едет» в двух случаях: либо вы отключили стиль, который помимо шрифта нёс CSS-правила (редко, но бывает с темами вроде Astra), либо вы не подключили шрифт обратно локально. В первом случае, вытащите CSS-правила из отключённого файла и скопируйте их в свой wp_head-блок. Во втором, просто добавьте недостающий @font-face.

Подходит ли метод для любой темы WordPress?

Да, с оговорками. Принцип dequeue style → local fonts → font-display: swap → preload универсален. Меняются только handle стилей: у Astra это astra-google-fonts, у GeneratePress это generate-fonts, у OceanWP это oceanwp-google-fonts. Чтобы найти handle вашей темы, откройте исходный код страницы (Ctrl+U), найдите <link rel="stylesheet" со шрифтом и посмотрите id тега, это и есть handle. Дальше, подставьте его в wp_dequeue_style. Современные темы (2024-2026) всё чаще добавляют font-display: swap из коробки: Twenty Twenty-Five, блоковые темы на основе theme.json уже имеют эту настройку. Прежде чем править код, проверьте, возможно, ваша тема уже всё делает правильно, а предупреждение вызывает только иконочный шрифт отдельного плагина.

Обязательно ли копировать шрифты локально?

Технически, нет. font-display: swap работает и со шрифтами, подключёнными через CDN (Google Fonts, cdnjs). Но локальный хостинг даёт два преимущества: во-первых, вы убираете лишний DNS-запрос к стороннему домену (экономия 50-200 мс), во-вторых, вы не зависите от доступности CDN. Если Google Fonts лёг, ваш сайт останется с читаемым текстом. Для production-сайта локальный хостинг, правило хорошего тона, для pet-проекта, опционально. Исключение: иконочные шрифты. Font Awesome, eicons, dashicons грузятся из плагина (локально по определению), их копирование в корневую папку нужно только затем, чтобы «перехватить» управление загрузкой после dequeue. Сам файл физически уже на сервере.

Что делать с предупреждением о шрифтах: итоговый алгоритм

Пройдите пять шагов из этого гайда, и предупреждение «Ensure text remains visible during webfont load» уйдёт из отчёта PageSpeed Insights. Если кратко: отключаете стандартное подключение → кладёте шрифты локально → возвращаете с font-display: swap → предзагружаете критический woff2 → для Elementor дополнительно меняете путь и пересобираете CSS. На выходе, текст на сайте виден мгновенно, метрики LCP и FCP улучшаются, а посетитель не видит «прыгающей» страницы.

Если не хотите копаться в коде, начните с плагина OMGF для Google Fonts. Для иконочных шрифтов плагина-«таблетки» нет, их всё равно придётся обрабатывать руками, но это 20 минут работы, которая окупается ростом баллов в PageSpeed и реальным ускорением загрузки. Пробуйте и тестируйте после каждого изменения, только повторный аудит покажет, что проблема действительно решена.