I've been building this site for a while, however the font I use for headers looks ragged on Windows using Chrome, although it looks perfect on Mac or using Edge: Link
I did try the various font smoothing properties to no avail and using text-shadow makes it look strange.
Is there anything else I can try?
The font I use for headers looks ragged on Windows using Chrome
Your webkit-font-smoothing
rule is missing a -
prefix, it should be -webkit-font-smoothing
To solve the issue of Chrome font-rendering, add -webkit-text-stroke: 0.3px;
Difference:
Final code:
h1, h2 {
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.3px;
}
* You may need to apply the above CSS to all selectors that use the custom font.
Preview
Original answer: https://stackoverflow.com/a/11493510/877671 voting to close as duplicate.