Font weights appearing heavier in browser (chrome and safari) then in Xd

[aaronffx]

Hi there, I am noticing very major differences in font weight between Xd and my web browsers.

Please look at the attached examples to understand how bad this looks.

Xd on left, Chrome on right.

Xd on left, Safari on right.

In the browser, both fonts appear to be bold, when they are just referencing the regular weight.

The Playfair Display is the large heading, and and Georgia is the remainder.

Georgia is just being used as it is installed with Microsoft Windows or Office.

We tried PT Serif instead of Georgia, loading in with Google Fonts and then Adobe fonts, and the same issue occurs.

Any ideas on how to fix this?

[aaronffx · Accepted solution]

I found a solution, put the following in your body tag in your html.

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

[Rishabh_Tiwari]

Hi Aaron,

Glad to hear that you were able to solve it! Thanks for sharing the solution, I am sure it will help other users. Feel free to reach out to us in case if you have any other questions or issues in the future.

Regards

Rishabh

[ktotten2]

Sorry, but that is not an acceptable solution. A better solution would be the ability to *disable* font smoothing within the XD tool, either as a global setting or per document. 

Applying font smoothing can cause usability issues: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[Alex – Post Projects]

This is huge. Chrome fat font was bugging me for weeks. Mandatory for every project.

[ktotten2]

Sorry, but that is not an acceptable solution. A better solution would be the ability to *disable* font smoothing within the XD tool, either as a global setting or per document. 

Applying font smoothing can cause usability issues: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/