Why are my fonts so fat?
Ran into this issue where fonts were appearing bolder than I knew they should be. In fact I wasn't even loading that bold of a font, so why was it so bold?
font-sythesis-weight
I did not know this property existed (among I'm sure many many more). Basically what it tells the browser is that, "it's ok for you to modify this font to make it look how the CSS is telling you."
Font files
Normally when you load a web font through Google fonts or even just manually, you have to specify what fonts to load. Google fonts specifically gives you options to only load the weights and styles that you will use. No sense loading fonts that you're not going to use.
But what happens if you've loaded something like Oswald Medium which is 500 weight, but then your CSS specifies 700 weight. This is where font-synthesis comes in.
The browser will attempt to modify the font so that it takes on the 700 weight. Is this a good thing? Seems like it's ok. Although, the browser is never going to be able to do as good a job as the font foundry customizing that weight with it's own font file.
Turn it off?
I'm contemplating turning it off in my own custom css reset file, but haven't gone that far yet.
It's less about whether it's a good outcome or not but more about confusion in our design system. I don't want developers to be able to mistakenly set a font to a wrong weight. By only loading certain fonts we are also restricting what is possible in our design system. I always lean towards intentionality in these sorts of things. Font synthesis could come in real handy but I would want to implement it intentionally.
What font is actually being used
It took me a while to nail down exactly how to know what font file is being used.
If you open the developer tools, select the element from the Elements tab, select the Computed tab on the right, then scroll al the way to the bottom, it will show you the Rendered fonts.
Extends of the synthesis
I haven't quite figured out the extend of the synthesis. I don't think if you load a 100 weight font that it will be able to synthesize a 700 weight font. But going one or two levels one way or the other seems to work.