Переход к стеку системных шрифтов в WordPress (как и зачем)


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

Я использую системные шрифты уже много лет и люблю их. Сейчас я желаю показать для вас, как употреблять стек системных шрифтов на WordPress-сайте.

Что такое стек системных шрифтов?

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

  • Неопасные веб-шрифты: они бесплатные, браузер не растрачивает время на их скачка, но, обычно, они смотрятся достаточно старо, а поэтому они изредка употребляются. Вы сможете поглядеть перечень неопасных веб-шрифтов.
  • Интернет-шрифты: смотрятся прекрасно, но требуют загрузки браузером. Доступны как бесплатные, так и платные функции. Они добавляют некий вес к вашему веб-сайту. Но их можно передавать через кэшируемые CDN. Посреди провайдеров можно отметить Гугл, Adobe Fonts (TypeKit) и т.д.
  • Локальное размещение веб-шрифтов: доступны как бесплатные, так и платные функции. Этот вариант просит некого времени на загрузку, но могут употребляться способности отдельного HTTP/2-соединения к кэшируемому CDN.
  • Системные шрифты: бесплатные, смотрятся круто, так как соответствуют ОС, не требуют загрузки. Они употребляются таковыми сервисами, как GitHub, Bootstrap, Medium, Ghost, Booking.com и даже консолью WordPress. По моему личному воззрению системные шрифты в macOS смотрятся чуток круче, чем в Windows.

Системные шрифты не являются кое-чем новеньким. Практически Medium употребляет их еще с 2015 года. Это родные шрифты для вашей ОС. Почти все из современных операционных систем подбирают шрифты весьма правильно, поэтому наружный вид постоянно является элегантным. И это не то же самое, что возврат к неопасному веб-шрифту Arial либо Times New Roman. Поверьте мне, никто не желает видеть на веб-сайте Times New Roman.

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

Читайте:  Unsplash выпустили официальный плагин для WordPress

Есть ли недочеты у системных шрифтов? Да. Во-1-х, они зависят от корректной работы браузеров. В Chrome 81 на macOS были задачи с выводом полужирных системных шрифтов. Но позже все было поправлено в Chrome 83. Но был маленький период времени, когда хоть какой веб-сайт, использующий системный шрифт, смотрелся несколько удивительно.

CSS для стека системных шрифтов

Благодаря свойству font-family у веб-шрифтов, мы обычно имеем базисный шрифт и один либо два запасных fallback-шрифта. В случае с внедрением системных шрифтов вы должны охватить все операционные системы, а поэтому для вас необходимо добавить чуток больше шрифтов. Поэтому этот способ и именуется стеком системных шрифтов.

Например, ах так может смотреться CSS для веб-шрифта:

font-family: "Open Sans","Helvetica Neue",sans-serif;

А ах так может смотреться стек системных шрифтов:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Знали ли вы, что ваша консоль WordPress употребляет стек системных шрифтов? Ах так это смотрится:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

Таблица стеков системных шрифтов

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

Системный шрифт OS
-apple-system (San Francisco) iOS Safari, macOS Safari, macOS Firefox
system-ui macOS Chrome, Windows Chrome (новейшие версии)
BlinkMacSystemFont (San Francisco) macOS Chrome
Segoe UI Windows Vista и новее
Tahoma Windows XP
Roboto Android, Chrome OS
Oxygen / Oxygen-Sans KDE
Fira Sans Firefox OS
Droid Sans Android (старенькые версии)
Ubuntu Ubuntu
Cantarell GNOME
Helvetica Neue macOS версии< 10.11
Arial Все
sans-serif Все

Как применить стек системных шрифтов

Сейчас давайте поглядим, как можно ввести стек системных шрифтов на WordPress-сайт.

Способ 1. Употреблять тему GeneratePress

Простой метод – испытать тему GeneratePress. В кастомайзере в разделе Typography вы сможете просто выставить пункт System Stack. Больше ничего не надо созодать!

Читайте:  Что такое квиз-сайт? Лучшие сайты-квизы

Способ 2. Добавить стек системных шрифтов через CSS

Если вы используете другую тему WordPress, вы сможете просто перейти к стеку системных шрифтов при помощи маленького CSS-кода.

Шаг 1. В WordPress для вас необходимо поменять CSS для вашего характеристики font-family. Вы сможете употреблять кастомайзер WordPress для прибавления кода в разделе Additional CSS.

Переход к стеку системных шрифтов в WordPress (как и зачем)

Шаг 2. Добавляем последующий код. Он может варьироваться зависимо от применяемой темы, но для большинства случаев подойдет конкретно таковой вариант (он перезаписывает все другие стили). Я использую этот же стек системных шрифтов, что и GitHub. Единственное исключение: я добавляю system-ui, так как новейшие версии Chrome поддерживают это. Помните, что шрифты будут употребляться в порядке их возникновения в стеке.

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Зависимо от вашей темы для вас может пригодиться добавить теги абзаца для контента body. Пример:

body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Шаг 3. Вы также сможете отключить любые посторонние шрифты, такие как, например, Гугл Fonts, чтоб они не загружались в теме WordPress. Этот шаг может варьироваться, так как любой разраб включает шрифты по-своему. Но в большинстве тем есть обычный метод включения и выключения Гугл Fonts.

Если вы используете дефолтную WordPress-тему, вы сможете употреблять плагин Disable Гугл Fonts для отключения шрифтов Гугл.

Тестируем скорость веб-сайта

Проведем испытания до и опосля для темы. Любой тест был выполнен 5 раз и взято среднее значение.

 

Скорость веб-сайта до конфигураций

Ниже приведен тест скорости веб-сайта до конфигураций (с загруженными шрифтами Гугл).

Переход к стеку системных шрифтов в WordPress (как и зачем)

 

Скорость веб-сайта опосля конфигураций

Вот тест скорости веб-сайта со стеком системных шрифтов. Как вы сможете созидать, я уменьшил вес странички на 60 Кб и избавился от 3 запросов. Один из их к fonts.googleapis.com, и потом 2 загрузки для различных font-weight-версий Roboto. Стек системных шрифтов был приблизительно на 6% резвее, чем при использовании Гугл шрифтов.

Переход к стеку системных шрифтов в WordPress (как и зачем)

Я понимаю много веб-сайтов, которые употребляют 4-5 шрифтов различного начертания и стиля, а время от времени даже 2-3 различных Гугл шрифта. Поэтому вы сможете столкнуться с наиболее существенными переменами, чем я.

Выравнивание шрифтов

Для вас может потребоваться добавить выравнивание шрифтов. Может быть, ваша тема автоматом применяет надлежащие CSS-атрибуты к вашему шрифту. В таком случае шрифты будут смотреться лучше.

 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

Резюме

Системные шрифты могут быть хорошей кандидатурой неопасным веб-шрифтам. Они не делают никакой доборной перегрузки для юзеров и при всем этом смотрятся потрясающе. Хотя Гугл-шрифты и кэшируются локально, но все они равно являются частью общего веса странички.

Источник: woorkup.com


Ваш комментарий

Ваш адрес email не будет опубликован.

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.