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.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 12/22/2023 at 18:41
Last Updated on 12/24/2023 at 12:46
<p>A flower that represents CSS with the text "font display" beneath it.</p>

Leverage the font-display CSS feature and set it to "swap" to ensure text is user-visible while webfonts are loading.

SubscribeConsult our CSS learning guide

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;
Ensure that text remains visible during webfont load

Looking to learn more ?

Browse our blog to learn more about CSS, ReactJS, GatsbyJS and much, much more.

Search our Blog

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.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe