wordpress ensure text remains visible during webfont load

Update page styling to use the custom font.This can be accomplished with a couple lines of JavaScript code, thanks to the FontFaceObserver library. Detect when your custom font is loaded.This ensures that the browser displays text immediately using a system font. Don't use a custom font on initial page load.This solution requires a bit of JavaScript: Font Display is an API that is not supported on every single browser, so another solution might be better. Once the custom font is ready, the system font is swapped out. Specifying “Swap” tells the browser that text using this font should be displayed immediately using a system font. By including font-display: swap in your style, you can avoid FOIT in most modern browsers: The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. You can use the listed files to point you in the right direction of fonts that you should probably address to make your page load faster and look better. Lighthouse flags any font URLs that may flash invisible text: Once the download is complete, the custom font is immediately applied. FOIT is pretty much how it sounds, when the browser sees that a custom font is applied to a text, it waits till the font is downloaded. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT). Fonts are often large files that take awhile to load.

Wordpress ensure text remains visible during webfont load