З моменту появи веб-шрифтів у 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