How do I specify which font weights are available for a given font family?

Question

I'm using a web font, and including weights 300 (light) and 700 (bold). Those are the only weights the site uses, and I specify on my html element that the default font-weight should be 300.

When the browser comes across a <strong> tag, the default styling applied (not sure if it's the browser's default sheet or normalize.css) is font-weight: bolder. This makes sense to me: I want to move one step bolder. And say I had three weights, I'd want it just to move to the next step from whatever the inherited weight would otherwise be.

However, bolder on a <strong> element somewhere in regular body text is bumping the weight up from 300 to 400, and the browser is rendering this with the same 300-weight font as the surrounding text. Clearly I want it to realize the next weight available is 700, and to use that.

Is there a way to tell CSS/the browser which font weights are available for a given font family, for the purposes of lighter and bolder?

Answer 1

Is there a way to tell CSS/the browser which font weights are available for a given font family, for the purposes of lighter and bolder?

No. The browser needs all fonts and weights. Means for whatever boldness you want/need, the font, you need to load every font with the boldness you want to use it.

You can try to include the font and weights like so:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

see here for more details: https://stackoverflow.com/a/7256119/2008111