Font display mode

When using your font files on the site, you can set a strategy for loading and displaying the font.

We recommend using the auto mode, which is used by default if the font-display property is not set. If you select `swap’, the text on the page will be displayed earlier, but then users will see the font change during loading. At this point, the text will “twitch” and it will be perceived as a “glitch”.

Also, after the download of each font file is complete, the user’s browser will “recalculate” the size and location of the blocks on the page, as the height and width of the letters change. This creates an additional load on the user’s computer or smartphone.

There is another good reason to hide the text in the first half second of loading. At this point, the CSS files that form the basic framework of the page have not yet loaded and the blocks on it represent “porridge”. The user will momentarily see a pile of blocks and stuck lines. This will negatively affect the overall impression.

The auto loading strategy allows you to save the user from contemplating a “glitch” when loading fonts and “porridge” from text blocks.

A detailed article with code examples is available [here](https://webformyself.com/css-font-display-budushhee-rendera-shriftov-v-vebe /). Official documentation here.

◀ The sequence of connecting JavaScript files Preliminary connection ▶

Any comments or additions? Send us an email admin@site-alarm.com .

Check your website