font-synthesis is the new -webkit-font-smoothing: antialiased

Bit of a mouthful there but just look at the difference between Safari and Chrome rendering a page with a variable font.

Chrome:

Safari:

At some point in the past, we used to be able to fix this with:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

But, this no longer seems to have an effect. I landed on this Stack Overflow answer and indeed that fixes the issue:

Safari with font-synthesis: style:

So by not providing font-synthesis: weight, we can tell the browser "stop artificially modifying this font and faithfully render the weights provided to you by the font". Which sort of feels like should be the default (and appears to be in Chrome), but... 🤷‍♂️.

ℹ️ MDN docs on font-synthesis

Reply by email