С момента появления веб-шрифтов в 2009 году веб-дизайнеры получили доступ к богатому набору типографских палитр. Эти шрифты в основном применялись через правило CS @fontface, что позволяло дизайнерам отказаться от использования системных (веб-безопасных) шрифтов.
Крупные разработчики шрифтов предлагали (и предлагают) разнообразные форматы файлов шрифтов, в первую очередь Google Fonts.
В то время использование веб-шрифтов означало работу с отдельными файлами для каждого начертания и стиля. Например, такие имена файлов ясно показывали, как шрифт будет отображаться при использовании:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttf.
Каждый вариант приходилось загружать как отдельный файл. Это увеличивало размер страницы, требовало больше HTTP-запросов и усложняло выбор и применение шрифтов в дизайне.
Рост популярности вариативных шрифтов
В 2016 году произошел крупный прорыв в цифровой типографике: появились вариативные шрифты. Разработанные совместно Google, Apple, Adobe и Microsoft, они быстро стали популярными.
Отличительной особенностью вариативного шрифта является то, что он может содержать любой из следующих элементов, каждый из которых называется осью:
| Ось | CSS-свойство |
| толщина | font-weight |
| стиль | font-style: italic |
| наклонный | font-style: oblique |
| растягивающийся | font-stretch |
| Оптический размер оси (opsz) | font-variations-setting |
Наиболее распространённым форматом файла является .woff2 (Web Open Font Format) — формат с высокой степенью сжатия, получивший рекомендацию W3C в 2018 году. Хотя такие форматы, как .ttf и .otf можно использовать в качестве вариативных шрифтов, наиболее эффективным является формат .woff2. Все современные браузеры поддерживают вариативные шрифты.
Для ясности мы проводим различие между «веб-шрифтами» и «вариативными шрифтами». Однако на практике вариативные шрифты часто объединяют с веб-шрифтами.
Зачем использовать переменные шрифты?
Есть три веские причины использовать вариативные шрифты в своих проектах:
- Повышенная производительность: вместо вызова нескольких отдельных файлов шрифтов (обычный, полужирный, курсив и т. д.) один файл переменного шрифта может охватывать все шрифты. Это означает меньше 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 по умолчанию уже включены два вариативных шрифта: 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 на всем сайте.
Шрифт Vollkorn теперь доступен в библиотеке шрифтов WordPress.
Следует отметить несколько моментов:
- Возможно, вы захотите скопировать файлы Manrope и Fira Code своей дочерней теме в случае, если TT5 обновится и укажет новые пути к файлам.
- Может показаться, что код для этих шрифтов избыточен, поскольку они уже зарегистрированы в родительской теме. Однако важно объявить их в дочерней теме. Это гарантирует их корректное отображение в интерфейсе библиотеки шрифтов и их доступность даже при обновлении родительской темы с новыми путями к файлам или внесении изменений.
- Мы ссылаемся на два разных файла 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>dir="auto"> через хуки 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. Проблема в том, что WordPress не предоставляет встроенного пользовательского интерфейса для выбора этих значений насыщенности.
Чтобы решить эту проблему, мы создали минималистичный плагин под названием «Параметры начертания шрифта». Он добавляет страницу настроек в раздел «Внешний вид» > «Начертание шрифта», где можно задать собственные значения начертания для основного текста, заголовков и блоков кода.
Вот сокращенный взгляд на основную логику:
<?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 "<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20body%20%7B%20font-weight%3A%20%7B%24weights%5B'body'%5D%7D%20!important%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6%20%7B%20font-weight%3A%20%7B%24weights%5B'headings'%5D%7D%20!important%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20code%2C%20pre%20%7B%20font-weight%3A%20%7B%24weights%5B'code'%5D%7D%20!important%3B%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />";
}
}
new Font_Weight_Options();Фрагмент выше демонстрирует основную логику. Мы опубликовали полный исходный код на GitHub Gist, если вы хотите увидеть плагин целиком, включая форму настроек и валидацию.
Полная версия добавляет:
- Значения по умолчанию при активации плагина.
- Простая форма настроек администратора с числовыми полями (100–900).
- Проверка для поддержания значений в пределах диапазона.
- Вывод весов как в редакторе блоков, так и в интерфейсе.
В результате появилась новая страница в панели администратора WP, которая позволяет пользователям устанавливать значения насыщенности для трёх шрифтов. Мы выбрали три «нестандартных» значения.
Новая страница настроек насыщенности шрифтов на панели администратора WordPress.
Результатом является страница с соответствующими значениями начертания шрифтов, которые отображаются так, как и ожидалось, в редакторе страниц и на внешнем интерфейсе.
Страница в админке WordPress, отображающая три шрифта с назначенной им шириной.
Более простой и удобный способ добавить один переменный шрифт
Но что делать, если вы предпочитаете что-то другое, а не шрифт 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()-&amp;amp;gt;get( 'Version' )
);
// Child theme style.
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri(),
array( 'twentytwentyfive-style' ),
wp_get_theme()-&amp;amp;gt;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, автоматически обрабатываются WordPress, если они правильно объявлены. Это одно из преимуществ использования блочной системы тем.
Как и в предыдущем примере, theme.json файл должен ссылаться на коды Manrope и Fira из родительского файла. Отсутствие этих ссылок приведет к их удалению из темы.
{
"$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, что вы работаете с дочерней темой.
Независимо от того, выбираете ли вы полностью индивидуальную настройку или быструю интеграцию, вариативные шрифты в WordPress — это мощный способ улучшить типографику вашего сайта. Они повышают производительность, упрощают дизайн и предоставляют адаптивные и гибкие возможности дизайна, которые просто невозможно реализовать с помощью традиционных статических шрифтов.
Чтобы раскрыть весь их потенциал, может потребоваться создать специальный пользовательский интерфейс, который отображает переменные оси (например, вес, наклон или оптический размер) и предоставляет владельцам сайтов больше контроля.
Источник: kinsta.com
Комментарии к записи: 0