"Flashing fonts" problem

Hi all,

I have this annoying problem with flashing fonts on my site. When it loads the “fallback” font appears and then after a second or more the intended font loads.

I posted on this forum a couple of months back and got some lines of code that I pasted in the Head tag. It worked initially but now the problem has returned. It’s really messing up the first impression of the site, would be great if someone could help me solve this :slight_smile:

Read-only link;
https://preview.webflow.com/preview/scorpiorising?utm_medium=preview_link&utm_source=dashboard&utm_content=scorpiorising&preview=b4c3f45be06c49c0b094403ea06daa0c&mode=preview

Best,
Axel (Sweden)

1 Like

@Mollinator - did you ever resolve this issue. I am having the same issue with fonts on my site. It looks really unprofessional and distracting.

Thanks

Use block it has a 3 second countdown before it displays a fallback font if your website loads really slow.

@Scott_Fraser
I know, it’s really frustrating :confused:

I got some custom code to solve it at the time (which I can no longer access unfortunately). The problem is called FOUT I believe. Maybe you can get some external coder-help if you search that term… My experience is that the Google fonts are working pretty well at least :slight_smile:

Hope that helps you!

@Mollinator
Thanks for the reply.

I actually uploaded the fonts directly and set them to swap. Although this improved slightly there is still a brief second that the fallback to the Arial font.

I’ve compressed and used woff2 as they seem to be the smallest in file size.

I’ll try and do some FOUT research to see what I can find.

Thank you :pray:

@iDATUS - what do you mean by block?

set to block, not swap.