Шрифты

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

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

FOIT vs. FOUT

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

Существует две основные стратегии:

• Задержка отображения текста до загрузки веб-шрифта (FOIT - Flash Of Invisible Text).
• Используйте локально установленный "запасной вариант" пока не будет готов веб-шрифт (FOUT - Flash Of Unstyled Text).

Оба метода имеют свои недостатки. FOIT скрывает текст от пользователя, а FOUT может вызывать неприятные визуальные впечатления. Оба вызывают проблемы с CLS. Пока веб-шрифты нужно загружать, эти проблемы сохраняются.

Отображение шрифта

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

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

Два наиболее распространенных значения для свойства font-display - swap и fallback.

Google Fonts

Google Fonts - популярная библиотека с открытым исходным кодом, предлагающая более 1500 семейств шрифтов.

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

Вот что происходит:

1. Браузер замечает тег <link href="https://fonts.googleapis.com/css2">, который побуждает его запросить файл CSS.
2. Проанализировав файл, он понимает, что нужен веб-шрифт с сайта https://fonts.gstatic.com, что приводит к еще одному запросу.

Чтобы смягчить эту проблему, мы можем самостоятельно хранить наши шрифты.

Самостоятельный хостинг

Вместо того чтобы пользоваться услугами сторонних провайдеров, таких как Google Fonts, мы можем самостоятельно размещать свои шрифты. Это означает, что мы загружаем файлы шрифтов и обслуживаем их с нашего собственного домена.

Некоторые преимущества включают:

• Улучшенная производительность;
• Больше конфиденциальности, поскольку Google отслеживает использование шрифтов;
• Самостоятельно размещённые шрифты загружаются в автономном режиме, что полезно для PWA или в условиях медленного подключения.

Fontsource

Самостоятельный хостинг с помощью fontsource так же прост, как установка npm. Он включает в себя все шрифты Google, а также другие шрифты с открытым исходным кодом, при этом вам не придётся самостоятельно управлять файлами.

У них также есть руководство Qwik City guide о том, как добавить fontsource в свой проект.

Руководство

Иногда мы хотим самостоятельно разместить шрифт, который не включён в Google fonts или fontsource.

Если у нас есть файл ttf или otf, мы хотим преобразовать его в файл woff или woff2. Для этого мы можем воспользоваться инструментом Fontsquirrel - Webfont Generator Tool.

Далее нам нужно создать правило @font-face в нашем CSS. Мы должны создать новое правило для каждого веса и стиля шрифта, который мы хотим использовать.

@font-face {
  font-display: swap;
  font-family: "Peace Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/peace-sans.woff2") format("woff2");
}

Выше приведён пример правила @font-face для шрифта "Peace Sans" с весом шрифта 400, с относительным URL-адресом нашего файла шрифта. Затем мы можем использовать шрифт в нашем CSS следующим образом:

body {
  font-family: 'Peace Sans', sans-serif;
}

Самостоятельное размещение шрифтов Google

Google Webfonts Helper - это инструмент, который позволяет загружать оптимизированные шрифты Google.

К сожалению, сюда не входят переменные шрифты. Чтобы обойти эту проблему, вы можете воспользоваться Google Fonts API, а затем загрузить оптимизированный файл переменного шрифта во вкладке network в Chrome.

Уменьшение размера шрифта

Если мы не используем определённые глифы, мы можем уменьшить размер шрифта с помощью свойства unicode-range. Glyphhanger - это инструмент, который позволяет нам захватить определённое подмножество шрифта.

Распространённым сценарием является использование только латинского подмножества шрифта. Это позволяет уменьшить размер файла шрифта.

Резервные шрифты

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

В последнее время предпринимаются усилия по "подбору шрифтов", или настройке свойств типографики для уменьшения влияния пользовательских шрифтов на CLS. Давайте посмотрим, как это можно сделать.

Генератор резервных шрифтов

Этот инструмент генерирует системный запасной вариант со специальными свойствами. Вот преувеличенная демонстрация того, как это работает

Вы можете использовать свойства size-adjust, ascent-override и descent-override для настройки системного шрифта резервного копирования в соответствии с пользовательским шрифтом.

Fontaine

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

Системные шрифты

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

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

Tailwind CSS также предоставляет полезные классы для распространенных системных шрифтов. Modern Font Stacks - это пример инструмента, который можно использовать для тестирования различных стеков шрифтов, включая Tailwind CSS plugin от участника сообщества.

Шрифт UX

Не используйте единицу ch для максимальной ширины тела страницы.

Рекомендуется иметь максимальную ширину 75ch или 75 символов, чтобы пользователю не приходилось двигать головой, чтобы прочитать текст, а также чтобы за ним было легче следить.

Однако если мы используем пользовательский шрифт, нам следует помнить о единице ch. Это связано с тем, что единица ch основана на ширине символа 0, которая может отличаться в разных шрифтах.

Это может привести к весьма необычным смещениям макета. Мы хотим задать максимальную ширину с помощью px или rem.

Используйте rem со свойством font-size.

В разных вариантах есть свои проблемы доступности. Мы хотим использовать rem со свойством font-size, поскольку оно основано на размере корневого шрифта. В противном случае выбранный пользователем размер шрифта не будет соблюдён.

Рекомендации по высоте строки

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