CODEWITHSUNDEEP
csswebfonts
tremby
tremby

Reputation: 10099

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

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?

Upvotes: 4

Views: 3981

Answers (4)

bencergazda
bencergazda

Reputation: 670

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.

Upvotes: 1

user4447799
user4447799

Reputation:

"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.

Upvotes: 3

Guffa
Guffa

Reputation: 700840

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; }

Upvotes: 1

caramba
caramba

Reputation: 22490

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

Upvotes: 4

Related Questions