Настройте показ всего текста во время загрузки веб-шрифтов

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

Если вам понравилась данная статья, то рекомендую к прочтению - микроразметка для сайта.