News image

Веб-шрифты и скорость сайта

Fallback шрифты, font-display и UX

Опубликовано:

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

Содержание:

Свойство Font-display

Свойство font-display в правиле @font-face отвечает за то, как шрифт будет отображаться во время загрузки. У этого свойства 5 значений: auto, block, swap, fallback, optional.

Auto означает что стратегию загрузки определяет браузер. В большинстве своем браузер придерживается стратегии blockBlock в свою очередь работает следующим образом: пока шрифт загружается браузер отрисовывает текст прозрачным шрифтом, т.е. этот контент пользователь не видит. После того как шрифт загрузился — прозрачный текст отрисовывается загруженным шрифтом. Промежуток времени от прозрачной отрисовки до загрузки шрифта и отображения контента называется периодом блокировки шрифта.

Swap работает почти так же как и block, только отрисовка происходит не прозрачным, а запасным шрифтом. А после того как шрифт загружается — происходит подмена. Это очень удачный вариант, потому что во время загрузки шрифта пользователь уже может начать визуально изучать контент. Это то свойство, которые нужно использовать всегда.

Ну как, гениально и просто? Согласен. А теперь давайте посмотрим на поддержку этого свойства в браузерах:

News image

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


Fallback шрифты

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

html {
  font-family: "Exo 2", "Roboto", sans-serif;
}

Если попытаться прочитать этот код, то  получатся следующие инструкции для браузера:

  1. Используй шрифт "Exo 2", пожалуйста
  2. Если такого шрифта нет - попробуй "Roboto"
  3. Ладно, если всех их нет - используй просто один из sans-serif (так обозначаются шрифты без засечек) шрифтов

Вот так просто вы можете установить fallback шрифты.

Ошибки в Google Page Speed Insights связанные со шрифтами

Настройте предварительную загрузку ключевых запросов

Лучше сразу сказать браузеру о том, что ему необходимо будет загрузить, поэтому для всех шрифтов, которые используются на вашем сайте - указывайте мета тег в <head> с параметром preload

<link rel="preload" href="/fonts/Exo2-Regular.woff2" as="font" crossorigin="anonymous">

Настройте показ всего текста во время загрузки веб-шрифтов

Эта ошибка возникает когда у вас до загрузки шрифта не отображается контент. Поэтому в правиле @font-face нужно установить свойство font-display со значением swap

// Устанавливаем font-display: swap в правиле @font-face

@font-face {
  font-family: 'Exo 2';
  font-display: swap;
  src: local('Exo 2 Regular'), url('../fonts/Exo2-Regular.woff2') format('woff2'),
  url('../fonts/Exo2-Regular.woff') format('woff'),
  url('../fonts/Exo2-Regular.ttf') format('truetype'),
  url('../fonts/Exo2-Regular.svg#Exo2-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Задаем fallback шрифт

html {
  font-family: "Exo 2", "Roboto", sans-serif;
}

Личные рекомендации

  1. Никогда не используйте больше трех шрифтов
  2. Всегда указывайте font-display:swap в правилах @font-face
  3. Задавайте правильные fallback шрифты для своего сайта

Если вы будете придерживаться этих простых правил - шрифты будут приносить вам радость, а не хлопоты. Спасибо за внимание 🙂