Почему при загрузке сайта виден скачек шрифтов?

Question

[Андрей Борчик]

Сайт arthata.by
Натянули адаптивную верстку.
Теперь при загрузке сайта видно как меняется шрифт, будто подгружается новый и заменяет старый.
Небольшой скачек.
Как исправить проблему?

Answer 1

[Игорь Воротнёв]

Это называется FOUC - Flash of Unstyled Content. Когда браузер отрисовывает страницу изначально, шрифты еще не догрузились. Когда догрузились - происходит перерисовка. Убрать полностью можно только отправляя сами файлы шрифтов в base64 в основном файле стилей. Тогда шрифт будет доступен сразу вместе с CSS, и все будет ок. Но есть и другой, более корректный способ - HTTP/2 и (в идеале) server push.

Answer 2

[Cube]

Шрифты с какого то cdn тянутся?

Comments

[Андрей Борчик]

не подскажу...

[Довольный Айтишникъ]

Андрей Борчик: А посмотреть на готовом сайте в коде страницы?

Answer 3

[Саша]

Сколько языков имеет шрифт?
Возможно слишком тяжелый.
Где подключаете, в секции

Comments

[Андрей Борчик]

не подскажу..., делают верстальщик и программист. Просто я увидел баг. И не знаю чей косяк

Answer 4

[outcastik]

Web Font Loader от гугл

Answer 5

[Александр Ружевич]

а как же прелоадер страницы? поставьте и забудьте, кода 2 строчки и пусть прыгает, все равно до полной загрузки страницы никто не увидит, да и эстетично это когда пользователь видит уже загруженную страницу а не прыгающую верстку и шрифты