Ensure text remains visible during webfont load

This is what I get when I run Lighthouse on my page:

I know that I am being pedantic in mentioning this, but there is a very easy solution to shut me up.

When I use the Theme Manager and select the fonts for my project, Wappler adds the fonts to the Bootstrap CSS file as follows:

By adding display=swap to the links, the message in Lighthouse disappears.

Hi Ben,

Glad it’s an easy fix therefore voting for it. But I have to be honest, I don’t know what it actually does. What does it mean/do?

Web fonts are relatively large in file size, so they often take a while to load. This means that other elements of the page content will often load before the font loads, and some browsers will hide text content during the ‘font wait time’.

This causes flash of invisible text (FOIT) and cumulative layout shift (CLS).

See:

1 Like