Оптимизация загрузки шрифтов WOFF2 в WordPress: практические методы и примеры

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

Формат шрифтов WOFF2 (Web Open Font Format 2) — это современный стандарт для веб-шрифтов, который обеспечивает высокую степень сжатия и быструю загрузку по сравнению с другими форматами. Оптимизация загрузки WOFF2 в WordPress напрямую влияет на скорость отображения сайта и пользовательский опыт. В этой статье мы подробно рассмотрим, как правильно подключать и оптимизировать WOFF2, чтобы минимизировать время загрузки и избежать блокировки рендеринга.

Почему важно оптимизировать загрузку WOFF2 в WordPress

Шрифты часто оказываются узким местом в производительности сайта. Даже сжатые WOFF2-файлы могут замедлять первый показ контента, если загружаются неэффективно. Браузер при рендеринге страницы ждет загрузки шрифтов, чтобы показать текст корректно, что может привести к эффекту FOUT (flash of unstyled text) или FOIT (flash of invisible text).

Оптимизация WOFF2 помогает:

Сократить время загрузки шрифтов;
Уменьшить блокировку основного потока рендеринга;
Улучшить показатели Core Web Vitals, такие как Largest Contentful Paint (LCP);
Повысить общую производительность сайта.

Как правильно подключать шрифты WOFF2 в WordPress

Использование @font-face с правильными атрибутами

Рекомендуется подключать шрифты через CSS с помощью правила @font-face. Для WOFF2 важно указывать формат и оптимизировать параметры загрузки:

@font-face {
    font-family: 'WPspeedFont';
    src: url('/wp-content/themes/yourtheme/fonts/font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

Очень важно хранить файлы шрифтов на том же домене, что и сайт, чтобы избежать дополнительных DNS-запросов и проблем с CORS. Загрузите WOFF2 в папку вашей темы или плагина и подключайте именно оттуда.

Практические способы оптимизации загрузки WOFF2

1. Предзагрузка шрифтов с помощью `rel=preload`

Для ускорения загрузки шрифтов можно добавить в <head> тега ссылку с атрибутом preload. Это заставит браузер начать загрузку шрифта как можно раньше:

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

В WordPress это можно добавить программно в файл functions.php:

function wpspeed_preload_woff2() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
}
add_action('wp_head', 'wpspeed_preload_woff2');

Обратите внимание на атрибут crossorigin="anonymous", который нужен для корректной загрузки шрифта с CORS.

2. Использование плагина для оптимизации шрифтов

Существует несколько плагинов, которые помогают оптимизировать загрузку шрифтов, в том числе WOFF2. Например, Clearfy предлагает функции для оптимизации шрифтов и удаления ненужных загрузок.

Другой вариант — использовать плагин OMGF, который локально загружает Google Fonts и преобразует их в WOFF2, а также добавляет предзагрузку.

Кастомный пример оптимизации шрифтов с использованием PHP и CSS

Ниже пример кода для подключения локального шрифта WOFF2 с предзагрузкой и правильным font-display, который можно добавить в functions.php вашей темы:

function wpspeed_enqueue_fonts() {
    // Предзагрузка шрифта
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
    // Подключение стиля с @font-face
    wp_enqueue_style('wpspeed-fonts', false);
    $custom_css = "
    @font-face {
        font-family: 'MyFont';
        src: url('" . get_template_directory_uri() . "/fonts/myfont.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    body { font-family: 'MyFont', Arial, sans-serif; }
    ";
    wp_add_inline_style('wpspeed-fonts', $custom_css);
}
add_action('wp_head', 'wpspeed_enqueue_fonts', 1);

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

Советы по дополнительной оптимизации и устранению ошибок

Проверяйте CORS-заголовки

Если шрифты не загружаются корректно, убедитесь, что сервер отвечает с заголовком Access-Control-Allow-Origin: * или ограниченным по домену. Это важно для работы предзагрузки и font-display.

Минимизируйте количество шрифтов и начертаний

Каждый дополнительный файл шрифта — это отдельный запрос. Используйте только необходимые начертания и веса, чтобы не перегружать загрузку.

Кэширование шрифтов

Настройте длительный кэш для WOFF2-файлов через .htaccess или настройки сервера, чтобы повторные посещения были максимально быстрыми.

Как проверить эффективность оптимизации шрифтов

Для анализа загрузки используйте инструменты:

Google PageSpeed Insights — проверит, есть ли проблемы с шрифтами и даст рекомендации.
Chrome DevTools — вкладка Network покажет время загрузки WOFF2 и приоритет.
WebPageTest — даст детальную картину загрузки и метрики Core Web Vitals.

Регулярно проверяйте сайт после внесения изменений, чтобы убедиться, что оптимизация работает и не приводит к визуальным артефактам.

Заключение по теме оптимизации WOFF2 в WordPress

Правильная оптимизация загрузки WOFF2-шрифтов в WordPress — это сочетание правильного подключения через CSS с font-display: swap;, предзагрузки шрифтов, локального хранения файлов и использования плагинов для автоматизации задач. Это позволит ускорить загрузку страниц, повысить комфорт пользователей и улучшить SEO-показатели.

Для удобства управления оптимизацией можно использовать плагин Clearfy, который содержит полезные инструменты для работы с шрифтами и другими ресурсами.