How to ensure that text remains visible when webfonts are loading
Leverage the font-display CSS feature and set it to "swap" to ensure text is user-visible while webfonts are loading.
When optimizing webpages, page speed insights will alert you that you are not showing text whilst web fonts are loading. Although this might be the preferred aesthetic for your user experience, it is damaging towards your SEO and the ability for robots to determine the quality of your content.
To ensure that text is visible as it loads, and swaps immediately once the font has loaded, add the line below to any css where you use a font-family:
font-display: swap;
Looking to learn more ?
Browse our blog to learn more about CSS, ReactJS, GatsbyJS and much, much more.
Any Questions?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.