Streaming live at 10am (PST)

Fonts quickly switching appearance when website loads

Hey, guys! I’m currently trying to build my very first portfolio (yay!) and I’m facing an interesting problem. Everytime a page is loaded the font looks thicker and then suddenly and very quickly it loads all the font properties I setted up on Webflow’s Designer.

Project link so you can see it for yourself: LINK

I’m not sure if this is useful at all but these are the font properties I’m currently using:

Landing page Heading:

  • Font-family: Montserrat;
  • Font-weight: 400 Normal;
  • Font-size: 40px;
  • Font-color: Black;
  • Line height: 1.3EM.

Landing page Subheading:

  • Font-family: Montserrat;
  • Font-weight: 200 Extra-light;
  • Font-size: 31px;
  • Font-color: Grey;
  • Line height: 1.3EM.

Well, that’s pretty much it. Thank you very much for your time! :vulcan_salute:

Hi there @Luciano_Infanti, at the moment there can sometimes be browser rendering issues with the font and antialiasing.

If you paste the following code in the Head of your site, it may help:

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

Here is how to use custom code: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

I hope this helps.

4 Likes

Hey, @cyberdave I tried as you said and the first code didn’t work at all. The second one, on the other hand worked like a charm!

Thank you for such fast reply!

Hi @Luciano_Infanti, thanks for getting back to me. Yes, sorry, I was not exactly sure from the description which case it was, and that font was just round enough for my bad eyes.

Glad it is worked out!

1 Like

Say, couldn’t you put a transition on that so that the opacity change is a quick .2 second transition, reducing the BOOM effect after WF finishes loading? That’d be cool.

1 Like

Hi @lux, I think the real solution will be for Webflow to build in support for this browser behavior, and I expect an update for that at some point. I like the creative idea though, if you try that, let me know how it worked for you.

1 Like

An update for this would be slick. Like ‘wait for custom fonts to load,
then display page’ or something similar? Thanks, @cyberdave. #fouc

Hi @Lux, that is exactly correct :slight_smile: or something automatic, to check the font has finished loading. Stay tuned!

1 Like

Hey, @Lux I did as you said and I think it looks nice! You can check the result using the link at the post. Thanks for your suggestion! :wink:

2 Likes

No problem! Cool!
Just in case, remember that setting the transition on the html element without a
class and being specific to transition only the opacity is a lean way to
get a great effect and not have potential performance downsides. So be sure
to do it that way. Something like
html {opacity:1;transition:opacity .2s ease .2s;} (plus vendor prefixes,
sadly)
added in there should help.
Added the .2s delay at the end to make sure it’s seen. :wink:

edit: Also, set the opacity to the html element, not all of the children, that’s a lot of calculations.
For example:
html.wf-loading body {opacity:0;} instead. Let us know if that helps.
Cheers!

1 Like

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