Как правильно подключить шрифт гугла?

[romeo_piter]

Использую шрифт Roboto через CDN.
Во-первых, шрифт визуально прыгает несмотря на то что подгружается в самом верху.
Во-вторых, сам же гугл вебмастер орет, что его же шрифт тормозит загрузку страницы.

Инструкции в сети курил, для WP и прочего есть готовые расширения. А тут не очень понятно, как правильно подключить, чтобы избавиться от этих недостатков. подскажите, плз.

[Татьяна5]

Да никак. Всё равно отклик гугла не уменьшится

[southklad]

сам же гугл вебмастер орет

Он сам на себя орет постоянно

[Nekstati]

romeo_piter, тормозит не шрифт и не гугл, а чебурнет. Положить шрифт себе себе на сервер, тут помощник: https://gwfh.mranftl.com/fonts/roboto?s ... ,latin-ext. Подключать только необходимые файлы шрифта, 4 штуки (regular, italic, 700, 700italic).

[romeo_piter]

Nekstati, в очередной раз огромное вам спасибо. Убрал загрузку с CDN, загрузил шрифт локально - производительность PageSpeed Insights поднялась. Моргание шрифта не ушло. Это не лечится? Или это по причине того, что он переопределен в конце css через !important? Есть разумные способы переопределить шрифты кроме как тупой заменой всех элементов font-family?
Ещё вопрос, в какой css файл лучше прописать шрифт, common в prosilver? Т.к. доп. цсс через расширение грузится дольше.

Кстати, на англ.офе активно обсуждают пессимизацию ресурсов с низкими показателями PageSpeed Insights, так что совсем не безобидные эти показатели. Ещё очень много претензий у гугла к breadcrumbs в мобильном виде.

[angst66]

Моргание шрифта не ушло

Во всех браузерах?

[Nekstati]

Есть разумные способы переопределить шрифты кроме как тупой заменой всех элементов font-family?

Есть. Когда вы прописываете в CSS вот это:

Код: Выделить всё

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}

и т.д.

- то в этом коде замените font-family: 'Roboto'; на имя того штатного шрифта, который вы заменяете. Это будет означать, что указанный в этом коде локальный файл (roboto.woff2) используется вместо штатного шрифта, указанного в CSS форума. Например, для стиля Prosilver надо font-family: 'Roboto'; заменить на font-family: 'Lucida Grande';

Соответственно, замену этого штатного шрифта на Roboto, как вы её прописывали ранее (!important и прочее) прописывать в этом случае не надо.

Какой шрифт вписывать для других стилей: посмотрите в инспекторе браузера, какие шрифты заданы для текста сообщений. Например, там написано: font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; - из них достаточно взять только первый. Затем таким же образом посмотрите шрифт для заголовков, меню, имён пользователей. Это может быть один и тот же шрифт, а могут быть разные. Если разные, то замену на файл Roboto нужно прописать для каждого из них.

Ну или тупо массовая замена имени шрифта по всем файлам CSS.

Ещё вопрос, в какой css файл лучше прописать шрифт, common в prosilver? Т.к. доп. цсс через расширение грузится дольше.

Можно прямо в stylesheet.css, в низ.

Ещё можно попробовать поменять значение font-display: swap; на block. Теоретически может повлиять на моргание.

Отправлено спустя 16 минут 12 секунд:
Ещё обязательно надо отключить в админке форума "Нагрузка на сервер -> Разрешить использование CDN". Оно грузит со сторонних адресов jQuery, FontAwesome и дополнительный шрифт Open Sans. Шрифт это, кстати, замечательный, но используется он только в кнопках и ради кнопок грузится (!).