Как сделать, чтобы web-страница не «дёргалась» при загрузке?

Question

[Кирилл]

Сверстал обычную web-страницу, в которой использую шрифты от Google Fonts. Подключаю их через @include в файле стилей. Например, @import url('https://fonts.googleapis.com/css?family=Roboto:300...').

Когда web-страница открывается, то она "дёргается" из-за того, что шрифты не сразу подгружаются. Дело в том, что когда Google-шрифт ещё не загрузится, отображается шрифт по-умолчанию. Из-за этого страница дёргается.

Как сделать так, чтобы не было такого побочного эффекта? Заранее спасибо!

Comments

[iBird Rose]

грузи шрифты через link. и самыми первыми в head после meta.

[Кирилл]

iBird Rose, да, самый раз, заработало. Видимо если подключать через Dmitrijs Balcers, браузер отобразит шрифты когда все стили подгрузятся. Из-за этого дёргалось. Спасибо!

Answer 1

[tural_osmanov]

Подключить файл стилей в шапке сайта

Answer 2

[forspamonly2]

https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Answer 3

[Одиночка Айс]

1. Подключить шрифты не через ГуглФонтс
2. Сделать прелоадер на всю страницу, а когда страница загрузится, то прелоадер убирать