Настройте показ всего текста во время загрузки веб-шрифтов
Настройте показ всего текста во время загрузки веб-шрифтов - так звучит рекомендация от 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.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.