CSS font-display позволяет вам контролировать, как веб-шрифты меняются системными шрифтами во время / после их загрузки. PageSpeed сообщает вам, что вы загружаете большой объем данных шрифта, используя @font-face, поэтому будет задержка (до нескольких секунд), когда ваш контент будет пустым в ожидании загрузки шрифтов.
Вы можете изменить это так, чтобы резервный шрифт загружался сразу и затем заменялся вашими веб-шрифтами после их загрузки. (имейте в виду, что ваши шрифты могут иметь разные размеры и приводить к скачкам при загрузке) .
Рассмотрим такую структуру:
@font-face {
font-family: "Open Sans Regular";
font-style: normal;
src: url("fonts/OpenSans-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
p {
font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif";
}
font-display:swap; означает, что при отображении страницы все теги абзаца будут использовать резервный шрифт FIRST AVAILABLE до тех пор, пока не будет загружена Open Sans Regular. (В этом случае Helvetica на Mac и Arial на Windows).
Это дает вам начальный контент на экране в течение нескольких миллисекунд вместо того, чтобы потенциально ждать несколько секунд для загрузки шрифта.