Streaming live at 10am (PST)

Text skipping when page load


#1

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:


#2

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.


#3

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.


#4

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?


#5

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.


#6

Done!

Thank you :slightly_smiling:

best
Kjell R


#7

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?


#8

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 :slightly_smiling:


#9

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

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