Forum Moderators: rogerd & travelin cat

Message Too Old, No Replies

layout shifts and font swapping

issues while loading pages

         

aledelpu

8:12 am on Apr 20, 2021 (gmt 0)

5+ Year Member



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

10:32 am on Apr 20, 2021 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

10:38 am on Apr 20, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

1:46 pm on Apr 20, 2021 (gmt 0)

5+ Year Member



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

tangor

7:30 am on Apr 21, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

7:42 am on Apr 21, 2021 (gmt 0)

5+ Year Member



thanks

martinibuster

7:58 am on Apr 21, 2021 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



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...]