Ragged website font on Windows

Question

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?

Answer 1

The font I use for headers looks ragged on Windows using Chrome

1. Your webkit-font-smoothing rule is missing a - prefix, it should be -webkit-font-smoothing

2. 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.