Управляйте шрифтами с помощью CSS font-display

Несколько способов сообщить браузеру, как подключить шрифт.

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

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

@font-face {
    font-family: “My-Custom-Font”;
    font-display: fallback;
}

Fallback

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

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

font-display: fallback очень прямолинеен: если ваш шрифт не загрузился вовремя, то он не будет использован.

Swap

Если ваш пользовательский шрифт критически важен для дизайна сайта, для вас есть вариант получше. font-display: swap сразу же использует резервный шрифт. В этом случае, как только завершится загрузка вашего пользовательского шрифта, будь то через секунду или 5, браузер заменит резервный шрифт на ваш пользовательский. Стоит отметить, что смена шрифта может раздражать пользователя, особенно если он уже сфокусировался на чтении.

Block

Если вы все-таки решили, что ваш шрифт очень важен, используйте font-display: block. Это свойство скажет браузеру подождать некоторое время (около трех секунд), чтобы загрузить шрифты. В это время пользователь не будет видеть никакого текста. Через три секунды будет использован резервный шрифт.

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

Какой способ использовать?

Если производительность стоит на первом месте, а пользовательские шрифты не очень-то вас волнуют, то font-display: fallback – это ваш выбор. Если пользовательский шрифт очень важен, то swap и block для вас.

Имейте в виду, что каким бы способом вы не воспользовались, сначала всё хорошо протестируйте.

Перевод статьи Control web typography with CSS font display.