Оптимизация загрузки внешних шрифтов в WordPress на практике

Автор: Полина Крылова | Опубликовано: 06.04.2026

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

Почему важно оптимизировать внешние шрифты в WordPress

Внешние шрифты загружаются с сторонних серверов, например, Google Fonts, что увеличивает количество HTTP-запросов и время ожидания ответа. Если браузер не может быстро получить файл шрифта, текст может отображаться некорректно (FOIT — Flash of Invisible Text) или с запасным системным шрифтом (FOUT — Flash of Unstyled Text), что негативно сказывается на восприятии сайта.

Оптимизация загрузки шрифтов позволяет:

Уменьшить время загрузки страницы;
Снизить количество запросов к внешним ресурсам;
Избежать блокировки рендеринга из-за ожидания шрифтов;
Повысить показатели Core Web Vitals (LCP, FCP);
Обеспечить лучший пользовательский опыт.

Основные методы оптимизации загрузки внешних шрифтов в WordPress

1. Локальное хранение шрифтов

Самый эффективный способ — скачать необходимые шрифты и разместить их на собственном сервере, чтобы исключить внешние запросы.

Для этого можно воспользоваться плагином Clearfy Pro, который позволяет автоматически скачать и подключить Google Fonts локально без ручных действий.

Если хочется сделать это вручную, следуйте алгоритму:

Перейдите на Google Webfonts Helper и выберите нужный шрифт.
Скачайте файлы шрифтов в нужных форматах (woff2, woff).
Загрузите файлы в папку темы, например /wp-content/themes/yourtheme/assets/fonts/.
Добавьте CSS для подключения локальных шрифтов в файл стилей темы:

@font-face {
    font-family: 'WPspeedRoboto';
    src: url('/wp-content/themes/yourtheme/assets/fonts/roboto-v20-latin-regular.woff2') format('woff2'),
         url('/wp-content/themes/yourtheme/assets/fonts/roboto-v20-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

Обратите внимание на параметр font-display: swap; — он позволяет браузеру показывать системный шрифт, пока загружается нужный, что уменьшает время невидимого текста.

2. Использование параметра font-display в Google Fonts

Если вы не хотите загружать шрифты локально, можно добавить параметр display=swap в URL Google Fonts, чтобы браузер не блокировал рендеринг страницы в ожидании шрифта.

Пример подключения в functions.php:

function wpspeed_enqueue_google_fonts() {
    wp_enqueue_style( 'wpspeed-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'wpspeed_enqueue_google_fonts' );

Такой подход прост, но все равно требует внешних запросов и зависит от скорости сервера Google.

3. Предварительная загрузка (preload) шрифтов

Для ускорения загрузки можно добавить в <head> страницу директиву preload:

<link rel="preload" href="/wp-content/themes/yourtheme/assets/fonts/roboto-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Это приоритетно загрузит шрифт, снижая задержки.

В WordPress это можно сделать программно:

function wpspeed_preload_fonts() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/assets/fonts/roboto-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'wpspeed_preload_fonts' );

Какие плагины помогут оптимизировать загрузку шрифтов в WordPress

Кроме Clearfy Pro, есть несколько полезных плагинов:

OMGF (Optimize My Google Fonts) — автоматически скачивает и подключает Google Fonts локально;
Asset CleanUp — позволяет отключать загрузку шрифтов на ненужных страницах;
Autoptimize — умеет объединять и оптимизировать CSS, включая стили шрифтов.

Каждый из них можно комбинировать для достижения максимального эффекта.

Как отключить ненужные шрифты, которые замедляют сайт

Часто темы и плагины подгружают лишние шрифты, которые вы не используете. Для их отключения можно воспользоваться хуком wp_dequeue_style в functions.php:

function wpspeed_dequeue_unwanted_fonts() {
    wp_dequeue_style( 'plugin-google-fonts' ); // пример идентификатора стиля
    wp_dequeue_style( 'theme-google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpspeed_dequeue_unwanted_fonts', 20 );

Для определения ID стилей можно использовать инструменты разработчика браузера или плагин Query Monitor.

Практический пример: полная оптимизация Google Fonts на сайте

Подытожим на примере шрифта Roboto:

Скачиваем файлы с Google Webfonts Helper.
Копируем в /assets/fonts/roboto/ темы.
Добавляем в style.css:

@font-face {
    font-family: 'WPspeedRoboto';
    src: url('assets/fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Добавляем в functions.php:

function wpspeed_enqueue_fonts() {
    wp_enqueue_style( 'wpspeed-local-fonts', get_template_directory_uri() . '/style.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'wpspeed_enqueue_fonts' );

function wpspeed_preload_fonts() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/assets/fonts/roboto/roboto-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'wpspeed_preload_fonts' );

Таким образом сайт перестанет зависеть от внешних серверов для шрифтов, загрузка ускорится, а показатели Core Web Vitals улучшатся.