Использование переменных шрифтов в WordPress: как и зачем

С момента появления веб-шрифтов в 2009 году дизайнеры получили в распоряжение богатый набор типографских палитр. Эти начертания в основном использовались через правило CSS @fontface. Это давало дизайнерам возможность освободиться от веб-безопасных (системных) шрифтов.

Различные форматы файлов начертаний были (и остаются) доступны от крупных производителей, в первую очередь Google Fonts.

В то время использование веб-шрифтов означало работу с отдельными документами для каждого веса и стиля. Например, такие имена, как приведенные ниже, давали четкое представление о том, как начертание будет отображаться при использовании:

Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttf

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

Содержание

Возникновение переменных шрифтов
Зачем использовать переменные шрифты
Как WordPress использует переменные шрифты
Кастомизация темы с помощью переменных шрифтов
Добавление шрифтов с помощью theme.json
Обеспечение правильной загрузки шрифтов
Упрощение выбора веса шрифта для пользователей
Удобный способ добавления одного переменного шрифта
Заключение

Возникновение переменных шрифтов

В 2016 году произошел значительный прорыв в области цифровой типографики. Появились переменные шрифты. Разработанные совместно Google, Apple, Adobe и Microsoft, они быстро стали популярными.

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

Axis	CSS Property
weight	font-weight
style	font-style: italic
slant	font-style: oblique
stretch	font-stretch
Optical Size axis (opsz)	font-variation-settings

Наиболее широко используемый формат файлов — .woff2 (Web Open Font Format). Это высокосжатый тип, который в 2018 году стал рекомендацией W3C. Хотя такие форматы, как .ttf и .otf, могут использоваться в качестве переменных шрифтов, наиболее эффективным является .woff2.

Все современные браузеры поддерживают переменные шрифты.

Для ясности я проведу различие между «веб-шрифтами» и «переменными шрифтами». Однако на практике оба этих формата объединяют.

Зачем использовать переменные шрифты

Есть 3 веских причины использовать переменные шрифты в проектах:

Лучшая производительность. Вместо вызова нескольких отдельных файлов шрифтов (Regular, Bold, Italic и т. д.) один документ переменного начертания может охватить их все. Это означает меньшее количество HTTP-запросов и более быструю загрузку.
Гибкость дизайна. Переменные шрифты дают возможность тонкой кастомизации. Вместо фиксированного значения font-weight: 500 или 600 возможно установить собственное, например 532.
Адаптивная типографика. Поскольку переменные шрифты могут плавно адаптироваться, можете создавать начертание, которое подстраивается под различные устройства. Хороший пример: использование font-weight: clamp() для масштабирования веса между окнами просмотра без резких «скачков», которые возникают при использовании статических файлов шрифтов.

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

С выпуском WordPress 6.1 в ноябре 2022 года в систему theme.json была добавлена поддержка переменных шрифтов. Первая демонстрация этого была в теме Twenty Twenty-Three.

Кастомизация темы с помощью переменных шрифтов

При работе с дочерней темой TT5 я начинаю с постановки в очередь стилей как родительского, так и дочернего шаблона.

Чтобы кастомные начертания отображались одинаково как в редакторе, так и на фронтенде, я ставлю в очередь файл fonts.css. Он содержит необходимые декларации @font-face.

<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
   wp_enqueue_style(
       'parent-style',
       get_template_directory_uri() . '/style.css'
   );

   wp_enqueue_style(
       'child-style',
       get_stylesheet_uri(),
       array('parent-style'),
       wp_get_theme()->get('Version')
   );

   // enqueue custom fonts
   wp_enqueue_style(
       'child-fonts',
       get_stylesheet_directory_uri() . '/fonts.css',
       array(),
       wp_get_theme()->get('Version')
   );
});
?>

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

Чтобы убедиться, что правильно настроили дочерний шаблон, запустите этот тест в styles.css:

body { background: #0000ff; }

Добавление шрифтов с помощью theme.json

TT5 уже включает 2 переменных шрифта изначально: Manrope и Fira Code. В этом примере добавим Vollkorn и сделаем его начертанием заголовков по умолчанию с весом 600.

Вот соответствующая часть theme.json:

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Manrope",
              "src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
              "fontWeight": "200 800",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": "\"Fira Code\", monospace",
          "fontFace": [
            {
              "fontFamily": "\"Fira Code\"",
              "src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
              "fontWeight": "300 700",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Vollkorn",
          "slug": "vollkorn",
          "fontFamily": "Vollkorn, serif",
          "fontFace": [
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "normal"
            },
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "italic"
            }
          ]
        }
      ],
      "customFontSize": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var:preset|font-family|manrope"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|vollkorn",
          "fontWeight": "600"
        }
      }
    }
  }
}

В результате шрифт Vollkorn появится на всем сайте.

Несколько моментов, на которые следует обратить внимание:

Вы можете скопировать файлы Manrope и Fira Code в дочернюю тему на случай, если TT5 будет обновлена с новыми путями к документами.
Может показаться, что код для этих начертаний излишен, поскольку они уже зарегистрированы родительским шаблонов. Однако важно объявить их в дочерней теме. Это гарантирует, что они будут правильно отображаться в интерфейсе библиотеки шрифтов и останутся доступными, даже если родительская будет обновлена с новыми путями к документам или изменениями.
Я ссылаюсь на 2 разных файла Vollkorn.

Обеспечение правильной загрузки шрифтов

Иногда шрифты не отображаются правильно на фронтенде, пока не объявите их в CSS. Вот типичный файл styles.css:

/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/

/* Ensure fonts are loaded and applied */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

code,
pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Vollkorn', 'Times New Roman', serif;
}

А в fonts.css я объявляю файлы шрифтов с помощью @font-face. Это гарантирует, что браузер знает, какие начертания загружать и применять.

Если хотите действительно предварительно загрузить важные шрифты (например, основной шрифт заголовков), также можете добавить <link rel=”preload”> в <head> сайта через хуки WordPress. В большинстве случаев правило @font-face с font-display: swap обеспечивает хороший баланс между производительностью и пользовательским опытом.

/* Preload critical fonts for better performance */
@font-face {
  font-family: 'Manrope';
  src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

В результате получается страница, на которой заголовки по умолчанию отображаются шрифтом Vollkorn с весом 600.

Если хотите, можете включить правила @font-face в файл styles.css. Это также избавит вас от необходимости добавлять файл fonts.css в очередь.

Упрощение выбора веса шрифта для пользователей

Одним из главных преимуществ переменных шрифтов является то, что вес не ограничивается фиксированными значениями, такими как 400 или 600.

Можете использовать любое значение в диапазоне от 100 до 900. Проблема заключается в том, что WP не предоставляет готового к работе интерфейса для выбора этих кастомизируемых данных веса.

Чтобы решить эту проблему, был создан плагин под названием Font Weight Options. Он добавляет страницу настроек в разделе «Внешний вид» > «Начертание шрифта». Там можете определить кастомные начертания для основного текста, заголовков и блоков кода.

Вот упрощенный вид основной логики:

<?php
/**
 * Plugin Name: Font Weight Options
 */

class Font_Weight_Options {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
    }

    public function add_admin_menu() {
        add_theme_page(
            __( 'Font Weight Settings', 'font-weight-options' ),
            __( 'Font Weight', 'font-weight-options' ),
            'manage_options',
            'font-weight-settings',
            array( $this, 'render_admin_page' )
        );
    }

    public function apply_font_weights_frontend() {
        $weights = get_option( 'fwo_font_weights', array(
            'body' => 400,
            'headings' => 600,
            'code' => 400,
        ) );

        echo "<style>
            body { font-weight: {$weights['body']} !important; }
            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
            code, pre { font-weight: {$weights['code']} !important; }
        </style>";
    }
}

new Font_Weight_Options();
?>

Вышеприведенный фрагмент кода показывает основную логику.

Результатом стала эта новая страница в админке. Она позволяет устанавливать значения насыщенности шрифта для 3 вариантов.

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

Удобный способ добавления одного переменного шрифта

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

Пользователи могут легко добавить типографику Google через библиотеку шрифтов.

Но что, если предпочитаете что-то другое, кроме данной вариации. Есть много способов получить надлежащим образом лицензированные шрифты с открытым исходным кодом для проектов. Я обратился к GitHub, чтобы приобрести SourceSans3VF-Upright, шрифт Adobe.

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

Файл помещен в папку /assets/fonts дочерней темы. Там я создал functions.php.

<?php
/**
 * Enqueue parent and child theme styles.
 */
function twentytwentyfive_kinstachild_enqueue_styles() {
    // Parent theme style.
    wp_enqueue_style(
        'twentytwentyfive-style',
        get_parent_theme_file_uri( 'style.css' ),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    // Child theme style.
    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_uri(),
        array( 'twentytwentyfive-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );

/**
 * Enqueue child theme styles in the editor.
 */
add_action( 'after_setup_theme', function() {
    add_editor_style( 'style.css' );
} );
?>

Как и в предыдущем примере, мой файл theme.json должен ссылаться на Manrope и Fira Code из родительского документа. Их пропуск приведет к удалению из моей темы.

<
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Manrope"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": "\"Fira Code\", monospace",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "\"Fira Code\""
            }
          ]
        },
        {
          "name": "Source Sans 3",
          "slug": "source-sans-3",
          "fontFamily": "\"Source Sans 3\", sans-serif",
          "fontFace": [
            {
              "src": [
                "file:./assets/fonts/SourceSans3VF-Upright.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Source Sans 3"
            }
          ]
        }
      ]
    }
  }
}
<

Помните, что вам по-прежнему нужен базовый файл styles.css, чтобы включить необходимые метаданные, сообщающие WordPress, что работаете с дочерней темой.

Заключение

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

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