Настройте показ всего текста во время загрузки веб-шрифтов
Настройте показ всего текста во время загрузки веб-шрифтов — так звучит рекомендация от Google PageSpeed Insights. Рассмотрим, как это реализовать.
1. Подключаем шрифт инлайново в теге head в формате
<head>
...
<style>
@font-face {
font-family: "FontBeautifulName";
font-display: swap;
src: local("FontBeautifulName"), url("fonts/FontBeautifulName.woff2") format("woff2");
font-weight: 400;
}
</style>
</head>2. Используем шрифт в формате
body {
font-family: "FontBeautifulName", "Other Beautiful Font", sans-serif;
}В случае с font-display: swap; — обязательно нужно прописывать шрифт на фоллбэк. Так как при значении swap (что в переводе с английского замена, обмен) браузер будет отображать другой шрифт, пока наш основной шрифт не будет загружен полностью.
Если font-display у вас не работает, возможно вы подключили шрифт в файле CSS, а не в HTML
Но даже такую последовательность действий PageSpeed иногда игнорирует.
Если вам понравилась данная статья, то рекомендую к прочтению — микроразметка для сайта.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: