Streaming live at 10am (PST)

When loading a page my text flickers with different font weights


#1

Hi there!

When loading my site in chrome on desktop, I see my h1 font flickering font weights. You can see it here http://reallygoodux-9e76a091f038-5e9fadd998682.webflow.io/ - if you load this page and keep refreshing youll see it happen over and over to my headline . “A look inside your favorite products”, its like it loads first as a thinner font weight then goes to the thcker font weight.

Im not sure why this is happening - heres a screen recording too…

You can view my read only link here

https://preview.webflow.com/preview/reallygoodux-9e76a091f038-5e9fadd998682?utm_source=reallygoodux-9e76a091f038-5e9fadd998682&preview=cde2fd124f7a66accf4c4d33b91fc66d


#2

sorry looks like my screen recording didnt come through, let me know if you cant replicate


#3

Your H1 look solid to me, with no flickering, Tanya.


#4

Had a closer look, I see the font swapping. It’s not flickering and it’s not related to weight. It’s just the flash of the custom font kicking in. It goes from “sans-serif” that’s declared on the HTML element, to your custom font.

Happens in under 200ms.

It’s usually hardly noticeable. the only advice I can give you is to use IX to delay the appearance of your H1, or higher parent element, by 200ms, (or try 100, 150ms), so that when the flash happens, your title isn’t yet visible, and then fades-in nicely. Could be the occasion to craft a subtle, interesting IX that is going to draw attention to the title. It could be the whole section sliding up a bit while appearing.


#5

Thank you so much! Sent that to my dev!


#6

Hi @Tanya_Higgins

This is a commonly asked question on the forums. In the future, please be sure to search for existing threads before creating a new one. :slight_smile:

This issue is called FOUT (Flash of Unstyled Text) and you can read more on this here: https://webdesign.tutsplus.com/articles/quick-tip-avoid-fout-by-adding-a-web-font-preloader–webdesign-8287

You can fix this by adding a bit of custom code to your site — Dave explains this more here: Flash of unstyled text - fallback fonts loads initially then switches to google font

Alternatively, you can try downloading the Google font, then uploading it to your site as a custom font.

I hope this helps! :slight_smile: