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

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

30/09/2019 12:04
admin
30/09/2019 12:04