От автора: когда я вспоминаю последние четыре года, которые я потратил, изучая все, что мог, о веб-шрифтах и о том, как производится загрузка шрифта на сайт, я могу свести все к небольшому контрольному списку советов, которым я следую. Наша цель в качестве веб-разработчиков заключается в том, чтобы максимизировать опыт и повышать ожидания пользователей до уровня того, что может обеспечить сеть, а также управлять бюджетами производительности, чтобы гарантировать, что мы соответствуем одному из основных принципов Интернета — повсеместная доступность. Этот чек-лист должен помочь вам выполнить эти два часто конкурирующих идеала.
Чек-лист по загрузке шрифтов
Начинайте загружать важные шрифты раньше
(Запускайте загрузку веб-шрифта)
Веб-шрифты не загружаются до тех пор, пока они не будут найдены в контенте, поэтому их загрузка часто запаздывает. Нам нужно указать браузеру начать загрузку наших высокоприоритетных веб-шрифтов раньше.
Стратегия: используйте preload
Приоретизируйте читаемый текст
(Поведение пока веб-шрифт загружается)
Это означает — абсолютно никакого невидимого текста. Это называется вспышкой невидимого текста или FOIT. Мы можем использовать стратегии вспышки нестилизованного текста (FOUT) для приоретизации системных шрифтов во время загрузки веб-шрифтов.
Стратегия: используйте font-display
Стратегия: используйте API загрузки шрифтов CSS
Сделайте шрифты меньше
(Сократите время загрузки веб-шрифта)
Предположите, что: Загрузка меньших файлов заканчивается раньше.
Стратегия: Использовать форматы WOFF2 (встроенное сжатие)
Стратегия: Создайте поднаборы шрифтов, если язык и лицензионные требования позволяют это.
Сократите движения во время загрузки
(Поведение после загрузки веб-шрифта)
Каждый независимый блок @font-face имеет свой собственный жизненный цикл загрузки. Его собственный FOIT, собственный FOUT, его собственную повторную отрисовку и перезагрузку. При использовании двух или более веб-шрифтов для одного семейства важно объединить их вместе, чтобы уменьшить перезагрузку текста на странице.
Стратегия. Используйте CSS Font Loading API.
Стратегия: используйте Переменные шрифтов (поддержка браузерами на Can I Use: Variable Fonts)
Автор: Zach Leatherman
Источник: https://www.zachleat.com/
Редакция: Команда webformyself.