Why do I see font jumps when loading the site?

Question

CMS

Site arthata.by We
pulled adaptive layout.
Now, when loading the site, you can see how the font changes, as if a new one is loaded and replaces the old one.
Small jump.
How to fix the problem?

Answer 1

It's called FOUC - Flash of Unstyled Content. When the browser renders the page initially, the fonts have not yet loaded. When loaded - there is a redrawing. You can remove it completely only by sending the base64 font files themselves in the main stylesheet. Then the font will be available right away along with the CSS, and everything will be ok. But there is another, more correct way - HTTP / 2 and (ideally) server push.

Answer 2

Are fonts pulled from some cdn?

Answer 3

How many languages ​​does the font have?
Perhaps too heavy.
Where you connect, in the section

Answer 4

what about the page preloader? set and forget, 2 lines of code and let it jump, no one will see it until the page is fully loaded, and it’s aesthetically pleasing when the user sees an already loaded page and not jumping layout and fonts