If you’re finding some fonts are rendering thicker/heavier in the Webflow preview and browser vs your design in Figma/Sketch etc, just add this CSS to the custom code section inside head tags:
body {-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;}
(Note: You’ll only see the changes reflected on the published site, not in the preview)
This is exactly what I need but can’t seem to get it working…
I’ve tried it in both of the page’s custom code and site-wide custom code and both times my font still looks PHAT
I think it might have something to do with incorrect code (it displays in red)
Did you check the published site? It won’t show up in the Webflow preview (I tried to put the code in an on-page embed to see the effect in the Webflow preview but for some reason it would only work for me when I had it in the project settings custom code tab, thus I need to publish to see the effect).
Also, a while ago I was having issues with the effect not working in Firefox properly and I came across a solution which replaces ‘antialiased’ with ‘grayscale’ for the Mozilla code (see below) which did the trick for me:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-font-smoothing: antialiased;
}