Skip to main content
Nick Sergeant
November 28, 2024

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:

Chrome showing fonts rendered at the font weight you would expect

Safari:

Safari showing fonts appearing much more bold than what you would expect

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:

Safari showing fixed fonts with font-synthesis

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

FLX Websites Logo