Streaming live at 10am (PST)

Text skipping when page load

Preview link

Hi,

I have a problem that text are skipping on almost every webflow site I have made.
Any one know why this is happening?

See the header:

Probably has to do with the web font not loading as fast as the page… but I rarely see it…

It may only be affecting you… I don’t witness that, for me the title stays still and doesn’t blink when I change pages.

Typekit stylesheet loading slowly, causing the page to display the fallback font until Typekit has loaded.

From the screenshot above, you can see it takes 8s on a 3G network. This means you see the old font for 8s, then the text font changes after that. Even on a fast network, there is about 0.5s - 1s of loading, causing the font to “flicker”. This is not a problem unless the user clicks on the link repeatedly like what you did.

There is nothing Webflow team can do about this, as it’s a third-party.

Thank you @samliew and @vincent

I guess there is nothing I can do either? I find it strange that it loads the font everytime I load the page. So I guess the font is never downloaded in the cash?

That’s the title of your website… So yes you should do something to avoid that. Make a vector wordmark out of it… ditch the text and make a SVG. Will be easier to load and render and no more flashs ever.

1 Like

Done!

Thank you :slight_smile:

best
Kjell R

Hi @krubens, one more thing to try, is to use a FOUT (A Flash of Unstyled Text) workaround to see if it helps.

Paste this into the header of the site in the custom code tab and republish the site:

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

Does this help?

3 Likes

Ahh…cool. So the unstyled text has a opacity of 0. Smart.

I’ll might try it on another project! for now I just replaced the header with a png img :slight_smile:

1 Like

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

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