Streaming live at 10am (PST)

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


#1

Hi everyone,

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

Here’s my share link: https://preview.webflow.com/preview/colibrimedia?utm_source=colibrimedia&preview=769c969d62c6c51f56ab81e3b2103387

https://www.webpagetest.org/result/181030_YH_2334b8b553cec18e827a03db63a57141/

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.