Font Weight Issues

Design help General
1

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.

1171×498 79 KB
1171×567 67.7 KB

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

2

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

Thanks,
~B.

3

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

7 Likes
4

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

Thanks,
Josiah

1 Like
5

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