Font Weight Issues

[jkniep (Josiah Kniep)]

Hello,

I’ve noticed that the font weights of the Google Fonts on Webflow are different than the original Google Fonts from https://fonts.google.com. The font weight in Webflow seems to be thickened by a small amount.

Right now I’m using Lato, and currently I only see the issue with this font.

Attached are some screenshots, comparing the fonts from my own website to the fonts from Google. Both screenshots are a comparison of Lato 24px regular.

I’ve even tried uploading the exact front from Google Fonts into Webflow, and the same it has the same issue in Webflow. I also looked at the published website and it’s the same.

As you can see, the first screenshot text is lighter (screenshot from another tool; I use with the exact same font weight, size, etc.) and the second picture is from Webflow, where it’s more thick and dark.

I would really appreciate it if someone could help me with this.

Thanks,
Josiah

P.S. Ignore the heading in the first screenshot as it is a darker color then the second

---

Here is my public share link: https://preview.webflow.com/preview/amazon-silver?preview=29546121628b83df97aa8d17e9094edb

[itbrian40 (Brian Harper)]

Is the font weight showing correctly in the published site? Is the issue only in the editor and/or the preview mode?

Thanks,
~B.

[mention79]

If you use the inspector on Google, you’ll see that they add -webkit-font-smoothing: antialiased; to the html, body class which is for Chrome, and Firefox needs -moz-osx-font-smoothing: grayscale; to do the same.

So what I do is add the following to the Head Code in the Custom Code section of the sites, as then Google fonts will then render as they do on the google site without the additional font thickening that the browsers add.

<style>
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    }
</style>

I hope that helps

[jkniep (Josiah Kniep)]

@mention79 It worked! I really appreciate the help. That was simpler than I thought.

Thanks,
Josiah