Как правильно настроить показ всего текста до загрузки шрифтов?

Всем привет.
В Google Pagespeed есть такая рекомендация:
Настройте показ всего текста во время загрузки веб-шрифтов
Чтобы пользователь мог видеть текст, пока веб-шрифты не загрузились, используйте функцию отображения шрифтов CSS.

Шрифты подключены в проекте так:
@font-face {
  font-family: "Museo Sans";
  src: local('Museo Sans'), local('MuseoSans'), url("../fonts/museosans/regular.eot?#iefix") format("embedded-opentype"), url("../fonts/museosans/regular.woff2") format("woff2"), url("../fonts/museosans/regular.woff") format("woff"), url("../fonts/museosans/regular.ttf") format("truetype");
  font-display: swap;
}


То есть, по сути, рекомендация выполнена, но Pagespeed все равно ее предлагает. Что я делаю не так?
  • Вопрос задан
  • 23006 просмотров
Пригласить эксперта
Ответы на вопрос 4
focuspro
@focuspro
@font-face {
  font-display: swap;
  font-family: "Museo Sans";
  src: local('Museo Sans'), local('MuseoSans'), 
  url("../fonts/museosans/regular.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/museosans/regular.woff2") format("woff2"), 
  url("../fonts/museosans/regular.woff") format("woff"),
  url("../fonts/museosans/regular.ttf") format("truetype");}


Сначала прописывается правило загрузки и потом шрифт, а не наоборот
Ответ написан
Комментировать
LobsterJoe
@LobsterJoe
Полагаю, что нужно использовать fallback fonts, возможно, это поможет решить проблему.
Ответ написан
@sozonovalexey
Методом проб и ошибок выяснил, что нужно указывать путь до шрифта без ../
Ответ написан
lukoie
@lukoie
1 шрифт надо подключить в хеддере, а не из цсс
2 шрифт у боди указывается в форме типа
font-family:  font-family: "Museo Sans", Helvetica, Arial, sans-serif;

то есть надо указать не только шрифт, который будете использовать, но и шрифт, который будет использован до загрузки нужного, и если нужный по какой то причине не сможет загрузиться.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы