Phantom font weights

Sometimes it's hard to determine what font is actually being loaded when styling text using CSS.

I expect that when I add font-weight: 600 to a heading that it will end up being that weight.

There is a trick though. If that font weight has not been loaded then the browser will just pick the next closest weight that is loaded.

We recently ran into a situation where we were specifying font-weight: 500 to some text but it looked bolder than the Figma we were referencing. There are anti-aliasing differences between Figma and the browsers, but this was more than what that would account for.

Devtools -> Computed

It's not something you just come across because it's way at the bottom! But if inspect an element to bring up devtools, then click on the Computed tab, then scroll aaaaaaaall the way to the bottom, you'll see the actual font that is being rendered.

Most times it won't show you the font weight specifically, but it will show you the name of the font being loaded. You can then go to the font supplier's site to determine the actual font weight.

Some font providers list the weight, others (like Adobe) you'll need to inspect their examples to see what the font-weight is.