Flash of unstyled text - fallback fonts loads initially then switches to google font

Hi,

I’m building this site, URL (http://testing-e9e419.webflow.io/) using webflow and I’m facing an issue here. The font that we are using here is ‘Myriad set pro’ and the issue is that during page load and page refresh, the navigation menu wobbles and shakes. Also, during page load and page refresh, the fall back font, Sans-Serif gets applied and then the default font, ‘Myriad set pro’, gets applied.

Please find the below image regarding menu jerking.

Following are the browser details that I’m using
Chrome Version :Version 48.0.2564.109 m

IE Version :Version 11.0.9600.17843

safari version : 5.1. 7

Firefox Version: 44.0.2

I have tried the above solution, but I’m unable to resolve this issue.

I would greatly appreciate your assistance regarding this issue.

Thanks,
Suguna

1 Like

Hey Suguna
Can you send a read-only link, so we can take a closer look? :smiley:

( How to send a read-only link )

Hi Davidlin_ch12

This is the read-only link:

https://preview.webflow.com/preview/testing-e9e419?preview=842a84a49da1fca5bc81919e1585fdcf

Thanks,
Suguna

Hey Suguna

The problem you are facing, is not happening for me.
Can you try to center the typography inside nv-link, because maybe that is fighting with the width :smiley:

EDIT: Also if you use the font Arial does this still happen?
David

Hi David

I’m required to use myriad-pro as the font family and that is when I’m facing this issue. Centering the typography inside nv-link with Arial font resolves the issue, but the same doesn’t hold good with myriad-pro font family.

Thanks,
Suguna

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Hi @suguna and @Davidlin_ch12,

Sorry for the long delay, I was doing some checking on this, and this behavior may be due to a phenomena called FOUT (a flash of unstyled text).

Read more about this here: Quick Tip: Avoid FOUT by Adding a Web Font Preloader

One solution for this is to use a custom style in the Header of the site, to set the html to 0% opacity while the automatic wf-loading class is added by google fonts while loading the fonts.

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

After adding the CSS above, then republish the site, and the momentary font fallback should be solved.

I hope this helps!

12 Likes

@cyberdave - your solution works flawlessly on my site. Thanks for the awesome script!

Christopher

1 Like

This seems like the wrong solution. I am having the same problem. The issue is that Webflow sets Arial as the font in their base CSS, and their is a delay before the correct font is applied. How can I remove the base font?

1 Like

Hi @olmstead, at the moment, it is not possible to remove the base font. I can understand, if an option for this was available, that may solve the issue. This is not a Webflow specific issue though, it happens on other sites made outside of webflow also, when a base default font is used.

The solution is a work around, not intended as a sole fix to the issue.

Which is why when creating clean CSS, you don’t want to ever set and reset a font. Is there a timeline on fixing this bug? Is there a bug report I can follow? This may be a deal breaker as far as my company’s continued use of the tool.

Looking into this more, it seems the root of the problem is with the delay in loading the Typekit font. Seeing if I can solve the problem using the typekit load events. Might be something you would want to support by default.

Hi @olmstead, thanks for getting back to me. Take a peek at this article: Fighting the @font-face FOUT - Paul Irish

The workaround was to overcome the the delay you mentioned, which also happens with Google Fonts.

We may be able to optimize this, I will open a new bug report on this and have our engineers take a look and see if something can be done on Webflow side to prevent this in advance.

I understand it is not ideal, and I would love to not have this issue, but currently the font feature set does not support removing the fallback font definition.

I cannot give an ETA on this yet, but as soon as there is more info, I will update the post.

Thanks!

Now that I understand the problem a bit better, I went back to your suggested work around using the typekit event, and think that will do for now. Thanks for the bump on a base font feature. Cheers

Hi @olmstead, thanks for letting me know. I just made sure that this issue gets in front of the devs, so that some discussion can be made to see how the issue can be handled by Webflow functions.

I will report as soon as I have more info. Thanks for posting on this, I think anytime that we can close a weird issue like this automatically via built in features, is a better approach.

it seems that Jason Pamental addressed this issue in that video : Webflow Workshop - Best practices for responsive typography with Jason Pamental https://youtu.be/HEaNIWSW1g8. Nonetheless, it would be a great help for me to find a step by step explanation of this trick (it was a little bit too fast on the video). Could you help me, please ?

See Eliminate Flash of Unstyled Text/Content (FOUC) e.g.: font loading