Закрыть

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

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

Тут описано как решить проблему с настройкой шрифта в Google PageSpeed Insights и избавится от сообщения "Настройте показ всего текста во время загрузки веб-шрифтов".

Обычно достаточно простого добавления font-display: swap; к свойствам подключения шрифта или с его ключем в строке импорта. Но часто проблему еще могут вызывать и различные дополнительные CSS свойства или неправильное подключение самих шрифтов. Например, шрифты от Google спокойно работают в Chrome и без всякого предварительного подключения. Поэтому неправильная строка подключения до сих пор могла оставаться вами незамеченной.

В подобных случаях. Раскрыв список "Успешные аудиты", вы так же можете обнаружить там сообщение:"... не удалось автоматически проверить значение font-display для следующего URL ...". Попробуйте прописать вначале "чистое" и правильное подключение шрифта, удалите все ненужное, проверьте и уж потом добавляйте нужные вам свойства. Примерно так:

@font-face{
	font-family: 'Play';
	font-display: swap;	
	src: url('../fonts/play-v11-cyrillic_latin-regular.woff') format('woff');
}
@font-face{
	font-family: 'FontAwesome';
	font-display: swap;	
	src: url('../fonts/fontawesome-webfont.woff2') format('woff2'),
	     url('../fonts/fontawesome-webfont.woff') format('woff');
}