Какой font-display нужен Гуглу чтобы он заткнулся?

Для @font-face — font-display: swap.

Для body прописывайте шрифты с «фолбеками», например, — font-family: "Custom-font", sans-serif.

Рустам Байназаров, все это и так есть. Это не работает

hckn, полный код в студию.

Рустам Байназаров, чего? Я говорю есть swap и есть фоллбеки. Какой еще код нужен?

hckn, мда, код скриншотами :))

Вообще, такой код нужно был изначально в вопросе выкладывать.

Попробуйте убрать такое количество fallback-шрифтов. Оставьте так:

body {
   font-family: "neue-haas-unica", sans-serif;
}

1. Если это поможет, оставьте по одному fallback-шрифту на систему.

2. Если это не поможет, то делайте по этому гайду:
https://web.dev/fast/avoid-invisible-text/codelab-...

P. S. В принципе, можно забить на это.

Набор бесполезных советов. Скриншот, потмоу что код постЦСС

font-family: config('fonts.main'), config('fonts.sans');

Вам бы ничего не дал. Поэтому сделал скриншот билда.

Гайд бесполезен, я и так использую webfontloader

Совет забить принимаю к сведению.

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

Your page should be styled to use a system font initially and custom fonts once the fonts-loaded class has been applied.

Забриаю слова обратно, это может быть полезно

html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

hckn, дорогой пользователь, я вам помогаю, чем я могу, поэтому в целом глупо так отвечать даже на то, что не помогло вам.

Можно скопировать компилированный код и вставить.

Более того, у меня была оная ошибка, она решилась удалением лишних fallback-шрифтов, коих другой разработчик оставил в количестве 9 штук.

По ссылке, что я прислал выше, — не то сообщение, удалил.

hckn, ну, в целом, так эта шняга и работает, шрифт изначально нужно поставить системный. Где-то в блоге Mozilla писали, что нужно ставить шрифт всегда в стили, чтобы быстрее рендеринг был. Мол, такой механизм обработки в современных браузерах.

P. S. Я пользовался этой хренью раньше всегда, но сейчас не вижу смысла в ней, если размер шрифтов не такой большой. Только лишний обработчик, а на скорость отображения влияет не так сильно. Но это, наверное, не применимо к highload-проектам, где нужны такие оптимизации.

Рустам Байназаров, да, спс за помощь. Насчет кода - ну сами понимаете будни современной разработки - все минифицировано, и в каком файле оно засунуто я буду выяснять дольше, чем сделаю скриншот))

Плагин мне этот нужен еще кое для чего - для эффекта SplitText, разбивается блок текста построчно, и если он отрабатывает до того как загружен шрифт, то он отрабатывает с неверными размерами (с ситемным шрифтом). Поэтому нужно сигналить ему, когда высчитывать.

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

Остановлюсь здесь



Итого: используя swap, webfonloader, woff2 - всего этого не достаточно чтобы исправить это замечание. Пусть это будет уроком нубам, которые надеятся добится хороших результатов в этом геморойном, тупом, бесполезном тесте (я видел сайт, который у меня загружался до полного взаимодействия около минуты, а эта тварь ему дает 98 - и накой тогда заморачиватся, спрашивается).

hckn, я на эти отдельные пункты этих тестоа забил по полной. Страницы проектов Google их не проходят нормально, что уж говорить.

Согласен. Главное, чтобы страница имела там адекватный рейтинг (помогает в рекламе, если Google AdWords), работала и загружалась быстро — и всем будет счастье.

Вспомнил что я использую утилити-классы! Вот она выгода утилитарного ЦСС!!!

.font-main {
  font-family: config('fonts.sans') !important;
}
.wf-active .font-main {
  font-family: config('fonts.main') !important;
}
.font-heading {
  font-family: config('fonts.sans') !important;
}
.wf-active .font-heading {
  font-family: config('fonts.heading') !important;
}

Впрочем, замечание по прежнему висит, НО, теперь дает 99, ха-ха

Рустам Байназаров, Google AdSense наверное все же? Что за плюсы?

hckn, нет, реклама именно AdWords. Рекламщики говорят, что чем больше рейтинги у сайта, тем меньше ставка, стоимость клика и т. п. Facebook тоже, говорят, учитывает это, если реклама там тоже. Рейтинг сайта у Google в т. ч. состоит и из показателей Page Insight, новой какой-то там шняги с маяком и огромной кучи внутренних показателей.

Ну, может, и для AdSense есть какие-то плюсы, конечно.

Указанная выше информация актуальна для рекламных кампаний в США. В России и др. странах могут быть другие критерии, а эти ни на что не влиять.

Рустам Байназаров, интересно, не знал такого! Кстати, совет с ссылкой можете вынести, отмечу решением. Все же конструктивно ответили. и многим может пригодится

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

Одиночка Айс, "обычно" и "просто" это не про шрифты (как видно даже из этой темы)

Вот например тот же Буцтрап юзает

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Буцтрап это вроде "обычно"? Я его не юзаю если что)

https://bitsofco.de/the-new-system-font-stack/
markdotto.com/2018/02/07/github-system-fonts
https://flaviocopes.com/css-system-fonts/

hckn, да, спасибо, сейчас напишу ответ.

Не знаю почему, но font-display надо указывать в самом верху