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.
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
EDIT: Also if you use the fontArial does this still happen? 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.
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.
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?
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.
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.
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 Pamentalhttps://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 ?