Css: Set Font Weight Depending on Fallback Font

How to set different font-weight for fallback font?

You could define a new @font-face for each font you want.

@font-face {
      font-family: 'mainFont';
      src: url(/*Link to Open Sans*/);
      font-weight: 600;
}

@font-face {
      font-family: 'secondaryFont';
      src: local('Helvetica');
      font-weight: 400;
}

@font-face {
      font-family: 'tertiaryFont';
      src: local('Arial');
      font-weight: 600;
}

Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.

CSS: set font weight depending on fallback font

I'm 99.99999% sure this can't be done without some serious JavaScript magic, and even with JavaScript it's damn difficult to find out which font was used in the end.

Related: get computed font-family in JavaScript asked by yours truly

How can I change the thickness of a fallback font without changing the preferred font?

You cannot. The font family and the font weight are independent in terms of CSS.

Days One is apparently bold, but not declared that way, and it does not have any regular typeface. They’re cheating, more or less, so you can counter-cheat by declaring the font to be bold. But this requires that you download and install the font to be used on your server.

CSS: How to set a fallback for bold font families?

Have you tried the following : How to add multiple font files for the same font? ?

The @font-face property allows you to specify for which styles to apply the font.

---

Related Topics