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

[Mollinator (Axel)]

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;
https://preview.webflow.com/preview/scorpiorising?utm_medium=preview_link&utm_source=dashboard&utm_content=scorpiorising&preview=b4c3f45be06c49c0b094403ea06daa0c&mode=preview

[QA_Brandon (Brandon Mosco)]

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

[Mollinator (Axel)]

Hi @QA_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…

[cyberdave (Dave S.)]

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

Page flashes before loading screen shows

Hi there, thanks for getting in touch about the page flashing, I am here to help. The behavior you are describing may be FOUT (a flash of unstyled text and usually occurs when text is finished loading before the Webfont. A workaround to fix this common issue for webfonts is to add a little custom code to the head of the site: <style> .wf-loading * { opacity: 0; } </style> This typically fixes the latency on the fonts. Here are some good resources: Some info on FOUT: FOUT, FOIT, FOFT | CSS…

I hope this helps

[Mollinator (Axel)]

Hi @cyberdave

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

[Mollinator (Axel)]

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?

Best,
Axel

[Make-Machine (Ben)]

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:
https://preview.webflow.com/preview/do-nice-things?utm_medium=preview_link&utm_source=designer&utm_content=do-nice-things&preview=432986385700092c0ab6b37bc141bedc&mode=preview

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

Please help, legend @cyberdave!

[ezekielrochat]

I’m having the same issue - tried the code <style> .wf-loading * { opacity: 0; } </style> and it is still happening. Any thoughts?

[cflo (Coleman Howard)]

my site is also experiencing this issue. hoping for a fix!

[mostprobablyme (Phil)]

I’m also experiencing the same problem with text I’m using in my pre-loader.
The code above doesn’t work out unfortunately.
Any help/adjustments to the code to make it work out would be highly appreciated, merci

[vlob (vlora)]

This is what worked for me in addition to the code that was provided in the forum - adding a transition for the font-family to the specific id element of the word that changes fonts. My word id is #middleword, but you could replace it with whatever your text element is. I added this custom code inside the tag:

<style> 
.wf-loading * { 
opacity: 0; 
}

#middleword {
transition: font-family 0.5s;
}
</style>