Streaming live at 10am (PST)

Fonts "jump" when site is loaded in chrome :(

Hi all,

I have this annoying problem that my custom fonts “jump” back to the fallback font when launched in chrome… It just flashes during the first second of loading the page (see video clip)

I’ve tried to back up the .ttf font with .eot and .woff versions as well. Nothing seems to help…

Any ideas how to solve this?

// Axel

Here is my read-only;

1 Like

Hi @Mollinator Axel,

Hey the video is not present in your post. Also what font are you trying to use?

Also, why do you have so many versions of the font loaded? Do you use all of those weights in your design? Which font are you using? The uploaded or the Google Font version? I would pick one and use that only.

Lastly, there are many weighted versions of the Noto Serif font. For a speed and loading perspective, only load the fonts and the weights you actually use in your project.

Best Regards,
~ Brandon

Hi @WebDev_Brandon
Sorry, it wasn’t uploaded properly. It just shows a short glitch/jump from the intended font to some fall back font.

I want to use playfair display for the first page and noto serif jp for all body text.

The reason why I use several versions is that I read on some forum that I potentially could solve the problem with fonts jumping… I have tried just having one font from google fonts and the problem persists…

Hi @Mollinator, this sounds like a problem with FOUT (a Flash of Unstyled Text), there are several posts on this, see here:

I hope this helps

1 Like

Hi @cyberdave

That seemed to do the trick! Thanks a lot, this issue was really bugging me…

1 Like

Hi again, your input (@cyberdave) in this thread solved the problem last time and it worked like a charm for some time. Now, however it has come back again. Sometimes it takes up to 3 seconds before the proper font is loaded… Any other ideas how to solve this annoying problem?


I am experiencing the same issue - I feel like this solution used to work, but not anymore!

This is the project I’m working on:

I have pasted <style> .wf-loading * { opacity: 0; } </style> to the head tag in the Custom Code section.

Please help, legend @cyberdave!