layout shifts and font swapping

issues while loading pages

[aledelpu]

Hi, I have issues with page loading (fonts, slider and images): layout shifting and font swapping between font system (immediatly visible) and web fonts (after a little while).
i'm fine with speed, i just want to avoid the swapping between fonts to be visible, so as to load the right fonts from the beginning (even if i have to wait a while for them to appear).

do you have any suggestion on how to improve this swapping and layout shifting (images and slider at the top of home page) between preloading and displaying of the fully loaded page?

Thanks for any suggestion you can give

[JorgeV]

Hello,

Solution, don't use external fonts, and rely with web safe fonts.

Now, there is certainly a possibility to load external fonts, and block the rendering of the page, until the fonts are in the browser's cache, but this might be odd too.

[lammert]

Welcome to WebmasterWorld aledelpu!

Did you try the font-display:block setting in your CSS settings? This should delay the rendering of text until the web font is loaded. It prevents the flash during swapping of fonts. font-display:auto does the same in most cases, but relies on the font loading preferences in the browser.

[aledelpu]

hi all and thanks. I added font-display:block in the CSS of child theme. is this the right place to add it?

[tangor]

For a really special font that MUST BE USED, consider loading it from YOUR SERVER instead of a third party. Works a treat if you pare it down to only the essential letters/punctuation required!

[aledelpu]

thanks

[martinibuster]

Pre-load the font if it's an external font. In the link to the font just add rel="preload"

<link rel="preload"

[developer.mozilla.org...]