Показ всего текста во время загрузки веб-шрифтов из google fonts

Показ всего текста во время загрузки веб-шрифтов из google fonts

С недавних пор ресурс fonts.googleapis.com стал поддерживать свойство "font-display". С помощью него можно пройти еще одну рекомендацию Google PageSpeed.

Добавьте в конце адреса параметр display равный swap и рекомендация "Настройте показ всего текста во время загрузки веб-шрифтов" будет пройдена.

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

Так же важно, что бы в свойствах font-family, помимо основного шрифта, был задан встроенный шрифт замены. Например:

.wrapper{
	font-family: 'Open Sans', sans-serif;
}

Если вы подключаете локальные шрифты, то в font-face нужно добавить свойство font-display: swap;

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), url(/path/to/open-sans.woff2) format('woff2');
}

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.