Ускорить загрузку шрифтов с гугл фонта?

Question

[MegaPuxapb]

При загрузке страницы, на долю секунды съезжает чердак (загрузка шрифтов).
Видно при жесткой перезагрузке, с очисткой кеша.
q665588f.beget.tech/doors8
можно как то ускорить? или как то по другому решить?

Comments

[Rustam Bainazarov]

Ваш сайт грузится как надо. Судя по всему, у вас font-display: swap (не могу проверить с телефона, но думаю, что так оно и есть).

Если это свойство в @font-face есть, то уберите его.

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

А скорость загрузки и обработки шрифтов с Google Fonts CDN вы не увеличите.

[MegaPuxapb]

Рустам Байназаров,
font-display: swap не ставил.
меня то всё устраивает, заказчик вредный(

[Rustam Bainazarov]

MegaPuxapb, тогда поставьте вот это:

font-display:block;

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

Пример:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

[Алекс Глебов]

opacity 0 на body можно, как загрузятся - убирать

[MegaPuxapb]

Рустам Байназаров, в моём случае)

<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,600|Roboto&display=block&subset=cyrillic" rel="stylesheet">

спасибо, помогло!

[Rustam Bainazarov]

MegaPuxapb, ну тогда пишу ответ.

Answer 1

[Rustam Bainazarov]

Если нужно, чтобы браузер ждал загрузки шрифта и только потом показывал текст, тогда поставьте вот это во @font-face:
font-display:block;

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

А скорость загрузки и обработки шрифтов с Google Fonts CDN вы не увеличите.