2

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?

tremby
  • 9,541
  • 4
  • 55
  • 74
  • One obvious workaround is to define the light version of the webfont as 400 weight rather than 300. However, I can't do this given that I'm loading the font from Google Fonts, which provides the `@font-face` rules for me. – tremby Dec 20 '17 at 01:50
  • Have you tried importing all the Google Fonts and the Weights? – GoofBall101 Dec 20 '17 at 02:27
  • @GoofBall101 that'd be too heavy in terms of file size, and the designer doesn't ever want to use the "normal" weight of this font on this site. – tremby Dec 20 '17 at 02:44
  • I was trying to explain it how caramba described it @tremby – GoofBall101 Dec 20 '17 at 02:57
  • 2
    In short, no you can't. The steps are fixed, in accordance with the table at https://drafts.csswg.org/css-fonts/#bolderlighter But maybe you could work around it. For example, how about mis-declaring your desired body font-weight at the same point that you select the font-family. If you've only got 300 and 700, then set the desired body text to be 400 (i.e. normal). Since 400 and 500 don't exist, the browser will use 300 in its stead. bolder will then up the weight to 700, and you get the stepping you want – Alohci Dec 20 '17 at 03:52
  • @Alohci, yes, I suggested this workaround above in my comment. Thanks for pointing out that table -- that explains the current behaviour (though not *why*). Yours is the most technically correct contribution we've had here, I think, so if you post it as an answer I'll accept it. – tremby Dec 20 '17 at 08:30

4 Answers4

4

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

caramba
  • 21,963
  • 19
  • 86
  • 127
3

"One obvious workaround is to define the light version of the webfont as 400 weight rather than 300. However, I can't do this given that I'm loading the font from Google Fonts, which provides the @font-face rules for me."

If there's no choice, you have manually re-define the @font-face and hope that google doesn't change the links :).

@import url('https://fonts.googleapis.com/css?family=Raleway:400,900');

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/raleway/v12/PKCRbVvRfd5n7BTjtGiFZAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

p:nth-child(1) {
  font-family: Raleway;
  font-weight: 100;
}

p:nth-child(2) {
  font-family: Raleway;
  font-weight: 400;
}

p:nth-child(3) {
  font-family: Raleway;
  font-weight: 900;
}
<div class="wrapper">
  <p>This should be thin but is bold</p>
  <p>This is regular</p>
  <p>This is bold</p>
</div>

If there is really no other solution, you can just serve the fonts yourself.

  • The first definitely sounds dangerous -- the links could break unexpectedly, as you said, if Google changes the URL. I would have thought the second (serving the fonts myself) was against Google's terms. But searching around a little it appears it actually is not, and [this site](https://google-webfonts-helper.herokuapp.com) makes it very easy. I think this is what I'll do. Thanks. – tremby Dec 20 '17 at 08:28
1

You are asking about redefining the intervals of lighter and bolder so that it's still usable in multiple steps, however you start off with saying that you are only using two weights of the font.

If you don't actually need the multiple steps, but only for the stronger tag to give you the bold text, you can simply change what it does in your CSS:

strong { font-weight: bold; }
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Yes, and this is what I'm doing right now. But say I have another font family which has multiple weights, and I still want the stepping behaviour of bolder/lighter to work there. – tremby Dec 20 '17 at 02:46
0

What about creating an additional @font-face rule, specifying font-weight: 400, and using the font files from the font-weight: 700 rule?

/* Rules generated by Google Fonts */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqZPANqczVs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fix for `font-weight: bolder` of a `font-weight: 300` parent */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2'); /* the same as for font-weight: 700 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

This only one additional font-face rule seems to be clean enough for me, and is even completely safe if you are self-hosting the font files.

bencergazda
  • 620
  • 8
  • 18