How to Set Different Font-Weight for 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.

Multiple webfonts + Fallback

A solution called font linking is to use the same font-family name multiple times on @font-face declarations and set font-variant and font-weight to the corresponding value, so for example in plain css:

@font-face {
    font-family: 'charter';
    src: url('font/charter_bold_italic-webfont.eot');
    src: url('font/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_bold_italic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_bold-webfont.eot');
    src: url('font/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_italic-webfont.eot');
    src: url('font/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_regular-webfont.eot');
    src: url('font/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Now you can use like any other font without worrying about faux bold or italic, with support for <strong> <b> <i> and <em> tags and with fallback font which correctly displays weights and styles.

If you want to read more: SmashingMagazine - Setting Weights And Styles With The @font-face Declaration

---

Related Topics