Lighthouse, how to fix: Text is invisible while webfonts are loading?

Publishing help SEO
1

Hi everyone,

I’ve been puzzled for a few months about how to manage the fonts properly.

Here’s my share link: Webflow - COLIBRI MEDIA

I made the typography choices in March 2018, when I first discovered Webflow (been addicted since that time). However, there are too many font weight loading. In some cases I have about 2 or 3 weights in the project but all other font weights get into the waterfall.

I also have the lighthouse: Text is invisible while webfonts are loading, which I try to fix with FOUT and similar techniques with nearly the same acronym. I couldn’t find a Flash Of Invisible Text though.

I tried using only custom google fonts, but as the fonts I used were already available in Webflow, I found it confusing.

I know it’s a bit heavy on the typography choices and I should have only 2 different fonts. I have 4.
But I’m pretty happy with performance so far.

Any idea? Suggestions?

Cheers.