Is it possible to make font-weight: bold equal to 500 instead of 700?

I've just been playing with Google Fonts and found the Fira Sans font. It's nice but I don't like the Bold (700) style, it's too bold for my liking. However, if I select the Medium (500) style the browser doesn't use it for anything set to font-weight: bold (e.g. <strong>). Instead it uses some kind of faux bold that looks blurry.

I can go through my stylesheet and set every occurrence of bold to 500. I could also use Sass to set a variable like $bold-weight: 500; which helps if I decide to change the font later.

That's a bit of a pain though, plus bold is also the default for many browser styles (e.g. <strong>, <th>) so I have to make sure I catch every possible occurrence of that too. And there may be external scripts/styles I don't control.

Is there a way to make all occurrences of bold use weight 500?

Solution

Yes there is,

When you choose to quick use a google font, you are provided with a link to include into the header, Open the link into your web browser and you would be served with a css file with lots of

/* cyrillic-ext */

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),   url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

As you can see the font-style: italic and the font-weight: 400 is linked with some specific font (Roboto Italic here) within the @font-face tag, meaning whenever you use font-weight: italic with font-weight: 400 (or normal), it refers to the font described within the src attribute.

Now, if you want to make all the font-weight: bold in your css use this font face, just change the 400 in above font-style to bold and you are done.

Or you can make a duplicate of the complete @font-face{..} and use another font-style into it.

Also, you can use different fonts here as well. Make sure to keep only one font-style or font-weight tag within a @font-face.

This example here uses google fonts, you can use the same technique for self-hosted fonts.