Начиная с Chrome 83, можно комбинировать свойства `link rel="preload"` и `font-display: optional`, чтобы полностью устранить проблемы с отображением.
Благодаря оптимизации циклов рендеринга Chrome 83 устраняет смещение макета при предварительной загрузке необязательных шрифтов. Сочетание <link rel="preload"> с font-display: optional — наиболее эффективный способ гарантировать отсутствие рывков макета при рендеринге пользовательских шрифтов.
Совместимость с браузерами
Актуальную информацию о кроссбраузерной поддержке можно найти в данных MDN:
Отображение шрифта
Изменение макета, или перекомпоновка, происходит, когда ресурс на веб-странице динамически изменяется, что приводит к «сдвигу» содержимого. Загрузка и отрисовка веб-шрифтов могут напрямую вызывать изменения макета одним из двух способов:
- Резервный шрифт заменяется новым шрифтом («вспышка нестилизованного текста»).
- «Невидимый» текст отображается до тех пор, пока на странице не появится новый шрифт («вспышка невидимого текста»).
Свойство CSS font-display позволяет изменять поведение отображения пользовательских шрифтов с помощью ряда поддерживаемых значений ( auto , block , swap , fallback и optional ). Выбор значения зависит от предпочтительного поведения для асинхронно загружаемых шрифтов. Однако до настоящего времени любое из этих поддерживаемых значений могло вызывать перекомпоновку одним из двух способов, перечисленных выше!
Дополнительные шрифты
Свойство font-display использует временную шкалу из трех периодов для обработки шрифтов, которые необходимо загрузить перед их отображением:
- Блок: Отображать «невидимый» текст, но переключаться на веб-шрифт сразу после завершения загрузки.
- Замена: Отображать текст с использованием резервного системного шрифта, но переключаться на веб-шрифт сразу после завершения загрузки.
- Ошибка: текст отображается с использованием резервного системного шрифта.
Ранее шрифты, обозначенные параметром font-display: optional имели период блокировки в 100 мс и не имели периода замены. Это означало, что «невидимый» текст отображался очень короткое время, прежде чем переключиться на резервный шрифт. Если шрифт не был загружен в течение 100 мс, то использовался резервный шрифт, и замена не происходила.
font-display: optional поведение в Chrome, когда шрифт загружается после истечения 100-миллисекундного интервала блокировки.Однако, если шрифт будет загружен до истечения 100-миллисекундного интервала, на странице будет отображен и использован пользовательский шрифт.
font-display: optional поведение в Chrome, когда шрифт загружается до истечения 100-миллисекундного интервала блокировки.Chrome перерисовывает страницу дважды в обоих случаях, независимо от того, используется ли резервный шрифт или пользовательский шрифт загружается вовремя. Это вызывает небольшое мерцание невидимого текста и, в случаях, когда отображается новый шрифт, сбои в компоновке, которые смещают часть содержимого страницы. Это происходит даже если шрифт хранится в дисковом кэше браузера и может загрузиться задолго до завершения периода блокировки.
В Chrome 83 внесены оптимизации , полностью исключающие первый цикл рендеринга для необязательных шрифтов, предварительно загруженных с помощью <link rel="preload'> . Вместо этого рендеринг блокируется до тех пор, пока не завершится загрузка пользовательского шрифта или не истечет определенный промежуток времени. В настоящее время этот период ожидания установлен на 100 мс, но в ближайшем будущем может быть изменен для оптимизации производительности.
font-display: optional поведение в Chrome, когда шрифты предварительно загружены и загружаются после истечения 100-миллисекундного интервала блокировки (без мерцания невидимого текста). 
font-display: optional поведение в Chrome, когда шрифты предварительно загружены и загружены до истечения 100-миллисекундного интервала блокировки (без мерцания невидимого текста).Предварительная загрузка необязательных шрифтов в Chrome исключает возможность зависания макета и мерцания нестилизованного текста. Это соответствует требуемому поведению, описанному в модуле CSS Fonts Level 4 , где необязательные шрифты никогда не должны вызывать перекомпоновку, а пользовательские агенты могут вместо этого отложить рендеринг на подходящий период времени.
Хотя предварительная загрузка необязательного шрифта не является обязательной, она значительно повышает вероятность его загрузки до первого цикла рендеринга, особенно если он еще не сохранен в кэше браузера.
Заключение
Команда Chrome заинтересована узнать о вашем опыте предварительной загрузки дополнительных шрифтов с учетом этих новых оптимизаций! Если у вас возникнут какие-либо проблемы или вы захотите предложить новые функции, создайте заявку в службу поддержки .