Fonts quickly switching appearance when website loads

Design help General
1

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:

1 Like
2

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: Custom code in head and body tags | Webflow University

I hope this helps.

5 Likes
3

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!

4

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
5

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
6

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
7

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

8

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

1 Like
9

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
10

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
11

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