Как использовать вариативные шрифты на веб-сайте WordPress

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

Что такое переменный шрифт?

Переменные шрифты - это отдельные шрифты, которые можно изменять с помощью CSS в соответствии с 5 различными критериями или осями. Каждая ось управляет одним конкретным аспектом внешнего вида шрифта и имеет соответствующую метку CSS.

• Вес ( вес в CSS)
• Наклон ( slnt в CSS)
• Курсив ( курсив в CSS)
• Оптический размер ( opsz в CSS)
• Ширина ( вес в CSS)

И тогда есть псевдо-ось класс, представленный ГРАД в CSS. Я хотел бы сказать вам, почему Grade пишется заглавными буквами, когда используется в ваших таблицах стилей… но я не могу. Что есть, то есть. Кроме того, по мере развития технологии новые оси могут вводиться (и вводятся) разными компаниями. Так что в будущем мы сможем многое сделать с этим.

Комбинируя все эти разные оси, вы можете заставить любой шрифт делать примерно все, что вы хотите, - даже анимировать их, как SVG. (Обратите внимание, это также включает шрифты значков, подобные нашему.)

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

Короткий ответ: они намного эффективнее, чем встраивание и рендеринг нескольких шрифтов на вашем сайте. Документация для разработчиков Google прекрасно резюмирует это:

Переменные шрифты OpenType позволяют нам хранить несколько вариантов семейства шрифтов в одном файле шрифта. Компания Monotype провела эксперимент, объединив 12 входных шрифтов для создания восьми начертаний с тремя ширинами, как для курсивного, так и для римского стиля. Хранение 48 отдельных шрифтов в одном файле с переменными шрифтами означало уменьшение размера файла на 88% . (курсив их)

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

Итак, теперь, когда мы знаем, что вариативные шрифты - это просто фантастика, следующим шагом будет их включение в наш рабочий процесс и на сайты WordPress.

Шаг 1

Первое, что вам нужно сделать, это установить шрифт на свой сайт. Вы можете либо использовать плагин, например Use Any Font, либо загрузить его непосредственно через интерфейс Divi, если вы являетесь членом ET, связать его с помощью @ font-face, либо полностью отказаться от плагинов и тем и сделать это по старинке.

Независимо от того, как вы это делаете, как только вы разместите его на своем сайте, использовать шрифт на самом деле довольно просто. Для этого я загрузил бесплатный шрифт Gingham через Divi, потому что я его использую. Конечный результат такой же.

Шаг 2

Поскольку переменные шрифты основаны на CSS, вам нужно будет перейти туда, куда вы добавили свой собственный CSS. Это может быть файл custom.css, файл stylesheet.css , дополнительный CSS вашего настройщика WordPress или даже нижняя часть вкладки Общие параметры темы Divi (у большинства тем также есть аналогичное поле). Вы введете этот код (с именем любого используемого вами переменного шрифта).

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

Это будет выглядеть примерно так в вашем окне CSS.

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

Шаг 3

Пришло время как-то его стилизовать. Вы можете делать с ним все, что хотите, а стили можно применить к любому классу или идентификатору. Как видите, этот применяется к любым div .et_pb_text . Вы можете применить его ко всему телу или h1, h2, h3 или даже p. Твой выбор. В конце концов, это вариативные шрифты.

Есть два способа подойти к этому. Первая - это одна эффективная строка CSS, использующая настройки изменения шрифта.

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

Вы также можете добавить их с другим CSS, точно так же, как float, z-axis или что-то еще.

В качестве альтернативы вы можете ввести оси на отдельных линиях.

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

В конце концов, они оба делают одно и то же.

Изображение предоставлено: Руководство разработчика Google

Где мне найти вариативные шрифты?

Найти вариативные шрифты немного сложнее, чем просто перейти к Google Fonts (тем более, что ни один из Google Fonts не является переменным). Поскольку технология новая, вариативные шрифты не так широко распространены. Они должны быть изготовлены индивидуально из-за всех взаимодействий между осями, поэтому в тех местах, где они есть, они, как правило, приобретаются премиум-шрифтами.

Adobe Typekit предлагает вам на выбор ряд вариативных шрифтов. Вы получаете доступ к некоторым из TypeKit с членством в Creative Cloud.
• V-Fonts.com - это каталог из множества разных мест, где вы можете получить вариативные шрифты. Они ссылаются на разные источники того, что они тянут.
• Monotype продает вариативные шрифты, и есть даже бесплатная демонстрация их шрифта FF Meta .

Бесплатные вариативные шрифты

Тем не менее, вы можете получить несколько бесплатных отдельных шрифтов. Это те, которые рекомендует восхитительно со вкусом сделанный и всегда талантливый Кенни Синг.

• Gingham - это то, что мы использовали выше. Кенни поставил меня на это, и он хороший.
• League Mono также является хорошим выбором для простого, но универсального вариативного шрифта.
• На странице Реннера написано, что это современный шедевр. Кто я такой, чтобы спорить?

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

Иметь ввиду

Единственное, что вам нужно помнить при использовании вариативных шрифтов на вашем сайте WordPress, это то, что не все браузеры поддерживают их, но Firefox, например, имеет некоторые проблемы с ними. Поэтому, если вы планируете сделать переменную часть переменного шрифта бесценной частью вашего веб-сайта, вам, вероятно, понадобится план действий в чрезвычайных ситуациях для людей, использующих Firefox… или Microsoft Edge. Но опять же, у вас, вероятно, уже есть один из них, потому что люди все еще используют IE 6.

Заключение

Вариативные шрифты приносят огромную пользу столу с минимальными усилиями со стороны пользователя. Замечательно иметь возможность стилизовать их с помощью атрибутов CSS, как если бы вы добавляли жирный шрифт или курсив. И поскольку все больше браузеров начнут распознавать различные оси, которые разрабатываются для них, вариативные шрифты будут чем-то, с чем вы захотите по крайней мере поэкспериментировать - если не охватить обеими руками.

Что вы думаете о вариативных шрифтах?

Автор статьи: Тайлер Финк / tylerfinck.com