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

Question

[Dmmitry]

Всем привет.
В 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 все равно ее предлагает. Что я делаю не так?

Comments

[4tlen]

font-family: "Museo Sans", Arial;
Фоллбек то на какой шрифт?

[Артем]

И ещё в дополнение - у меня на одном проекте ругался из-за того, что font-display был в конце @font-face. Перенес повыше и перестал ругаться, при учёте того что и фоллбэк шрифты используются

[Dmmitry]

4tlen, здесь шрифт подключается. фоллбек указывается дальше, в html {}.

[jeruthadam]

Дмитрий Чередниченко, это бесполезно, это баг. Какой бы font-display ты не поставил - эта нечисть будет ругаться. Итог - в топку эту мразь

[Павел Ткаченко]

Резюмирую в отношении своих проб:
-фоллбек
-указание font-display выше чем src
-разные методы указания адреса на файл шрифта (ни относительно корня, ни относительно css файла ни абсолютный путь))
-асинхронная загрузка файла стилей в котором идет @font-face

Ничего из вышеперечисленного не помогло убрать эту рекомендацию в Google Pagespeed. Гугление не помогает. Опустил руки...

Answer 1

[Soho]

@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");}

Сначала прописывается правило загрузки и потом шрифт, а не наоборот

Answer 2

[LobsterJoe]

Полагаю, что нужно использовать fallback fonts, возможно, это поможет решить проблему.

Comments

[Dmmitry]

используется

Answer 3

[sozonovalexey]

Методом проб и ошибок выяснил, что нужно указывать путь до шрифта без ../

Comments

[lukoie]

это как это???
если цсс лежит в
site/css/
а шрифты в
site/fonts
то без ../ Вы до него просто не доступитесь

[den234624234642]

у меня все равно пишет, Настройте показ всего текста во время загрузки веб-шрифтов.
хоть со своего хостинга подгрузка шрифта, хоть с гугла...
так и не понял, как решить это

[sozonovalexey]

lukoie, путь можно указать от корня сайта /site/fonts

[Павел Ткаченко]

пробовал по всякому и этот вариант, даже указал абсолютный путь - не помогает, все равно ругается

Answer 4

[lukoie]

1 шрифт надо подключить в хеддере, а не из цсс
2 шрифт у боди указывается в форме типа

font-family:  font-family: "Museo Sans", Helvetica, Arial, sans-serif;

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