How to make it so that when the page loads, the content does not jump due to the downloaded fonts?

Question

css

I connect a non-standard font using @font-face. When the page loads, the following happens: html and css have already loaded, and the font itself is still loading. After the font has loaded everything is as it should be, but there is a visual jump. How to get rid of it?

Answer 1

It is polite to ask the user to install this font into their system.

Answer 2

Use a safe font as close as possible to the non-standard one.
Load custom font using js.
At the time of successful loading, add a class to the element, for example (font-loaded).
In styles, assign a custom font to this class.

Answer 3

Use Typekit or Google Fonts if the font you need is there.

Answer 4

Is the pretty and popular Verdana not cool anymore?
PS. about Google Fonts - good advice.
ZZY. It is possible to prescribe some kind of pre-load and cache the whole thing in one... But depending on how much your wonderful fonts hang...

Answer 5

Try explicitly setting the height and width for blocks that change their size a lot, which they acquire when loading the desired fonts. Yes, tedious and painstaking, yes, it does not always help, but it can reduce the severity of the problem.