Как добавить поддержку WOFF2 шрифтов в тему WordPress: практическое руководство

Формат шрифтов WOFF2 является современным и оптимизированным для веба, обеспечивая лучшее сжатие и быструю загрузку по сравнению с другими форматами, такими как TTF или WOFF. Добавление поддержки WOFF2 в тему WordPress позволяет улучшить производительность и качество отображения текста на сайте, особенно на мобильных устройствах.

Почему важно использовать WOFF2 в теме WordPress

WOFF2 — это формат веб-шрифтов, поддерживаемый всеми современными браузерами. Он обеспечивает более высокую степень сжатия без потери качества, что значительно уменьшает размер файлов шрифтов. Это напрямую влияет на скорость загрузки страниц, уменьшение потребления трафика и улучшение пользовательского опыта.

Если в вашей теме WordPress используются кастомные шрифты, то переход на WOFF2 — это один из важных шагов к оптимизации. Кроме того, многие популярные шрифты из Google Fonts уже предоставляются в формате WOFF2.

Однако, чтобы браузер корректно загружал WOFF2, нужно правильно подключить эти файлы в теме, учитывая fallback на другие форматы для старых браузеров.

Как подготовить файлы шрифтов и где их разместить

Для начала вам нужно получить файлы шрифтов в формате WOFF2. Если у вас есть TTF или OTF, можно конвертировать их в WOFF2 с помощью онлайн-сервисов или локальных утилит, например, Google Webfonts Helper или woff2_compress.

Рекомендуется хранить шрифты в папке темы, например, /wp-content/themes/your-theme/fonts/. Это позволит контролировать версионность и кэширование.

Важно также иметь fallback форматы (WOFF, TTF) на случай, если браузер не поддерживает WOFF2, хотя таких сейчас очень мало.

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

Подключение шрифтов делается через правило @font-face в CSS вашей темы. Ниже пример подключения шрифта с поддержкой WOFF2 и fallback:

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

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

Чтобы подключить этот CSS, можно добавить файл стилей шрифтов в вашу тему и зарегистрировать его через functions.php:

function wp_theme_register_fonts() {
    wp_enqueue_style('wp-theme-fonts', get_template_directory_uri() . '/fonts/fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wp_theme_register_fonts');

Динамическое подключение WOFF2 с помощью функции в functions.php

Если вы хотите более гибко подключать шрифты, например, с возможностью смены шрифтов в настройках темы, можно использовать PHP-функцию:

function wp_theme_enqueue_custom_fonts() {
    $font_url = get_template_directory_uri() . '/fonts/roboto-v20-latin-regular.woff2';
    $css = "@font-face {font-family: 'WpThemeRoboto';
            src: url('{$font_url}') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap; }";
    wp_add_inline_style('wp-theme-style', $css);
}
add_action('wp_enqueue_scripts', 'wp_theme_enqueue_custom_fonts');

Здесь wp-theme-style — это основной стиль вашей темы, к которому добавляется встроенный CSS с определением шрифта.

Проверка загрузки и диагностика

После подключения шрифтов важно проверить, что они действительно загружаются в нужном формате WOFF2. Для этого:

Откройте сайт в браузере Chrome.
Перейдите в инструменты разработчика (F12) → вкладка Network.
Обновите страницу и отфильтруйте по типу font.
Проверьте, что шрифты загружаются с расширением .woff2 и статусом 200.

Если шрифты не загружаются или браузер загружает fallback-формат, проверьте пути в CSS, права доступа к файлам и корректность MIME-типа на сервере (должен быть font/woff2).

Использование плагинов для управления шрифтами с поддержкой WOFF2

Если вы не хотите вручную работать с кодом, можно использовать плагины, которые оптимизируют подключение шрифтов, например:

OMGF (Optimize My Google Fonts) — загружает шрифты локально, поддерживает WOFF2 и улучшает кеширование.
Custom Fonts — позволяет загружать собственные шрифты разных форматов через админку.

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

Особенности поддержки WOFF2 в старых браузерах и fallback

Хотя WOFF2 поддерживается большинством современных браузеров, на старых версиях Windows Internet Explorer или некоторых мобильных браузерах может не работать. Поэтому всегда используйте fallback на WOFF или TTF.

Пример с fallback уже был показан выше. Такой подход гарантирует максимальную совместимость без потери производительности.

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

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

Если вы используете тему Reboot или другие темы от WPSHOP, то подключение WOFF2 можно выполнить по аналогии с описанными методами, либо дополнить функционал через хуки темы.