FOIT and FOUT can happen during the time your fonts are loading.
ENSURE TEXT REMAINS VISIBLE DURING WEBFONT LOAD DOWNLOAD
That’s why you may see the rest of the page download before the fonts. Setting your font-display method to swap or optional, then preloading critical fonts loading above the fold can take just a few minutes and should usually fix this for most WordPress sites.įonts load slowly because of their large file sizes. Size-adjust lets you adjust the font size to be the same as your custom font – so there’s no shift. However, if your system font and custom font have different styling, it creates FOUT (flash of unstyled text) which results in a layout shift when the swap happens. The system font is then “swapped” with the custom font.
By changing the font-display method to swap or optional, a system font is shown until the custom font is done downloading. While fonts are downloading, browsers hide the text which creates a flash of invisible text ( FOIT). Preloading fonts can also eliminate layout shifts from optional fonts. The solution is to change font-display method to swap or optional which is usually done in your cache plugin (check their documentation), by using a plugin, or by adding the font-display method in your font’s CSS. If you ran your website through PageSpeed Insights, you may see a recommendation to ensure text remains visible during webfont load.
0 kommentar(er)
