Search code examples
csscross-browserfont-facewebfonts

@font-face, font variants

This is my @font-face declaration to support different font variants, in this case the bold and bolder version of my font.

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bolder;
}

Right now I'm just working with Chrome and Firefox. In Chrome the normal and bold variants work, but not the bolder variant (keeps the 'bold' one). In Firefox only the bold variant works as expected, in any other case the bolder variant is used (even for normal weight).
Is this a known issue or is there a better way to do this declaration?

Solution

  • There are 2 separate issues here:

    1. The use of font-weight keywords rather than numeric values.
    2. Support for IE8 (and earlier versions), if needed.

    Keywords

    The problem with using font-weight keywords appears to be that lighter and bolder are not absolute values like normal and bold (always 400 and 700, respectively), but are relative to the established boldness of the parent element (100 lighter or darker). It may not be possible to treat lighter and bolder as if they're absolute values.

    As @HTMLDeveloper and @Christoph suggested, using numeric values rather than keywords is the easy solution to this, and may by itself be an adequate solution (if support for IE8 isn't needed).

    @font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 900;    /* or whatever weight you need to use for "bolder" */
}

    IE8 and earlier

    Some browsers have display issues when multiple weights or styles are associated with the same font-family name.

    Specific issues I'm aware of:   (there may be others)

    • When more than 1 weight is linked to a font-family name, IE8 has display issues.
    • When more than 4 weights or styles are linked to a font-family name, IE6/7/8 has display issues.

    The solution is to use a unique font-family name for each font variation:

    @font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bold";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bolder";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}

    This approach is commonly used by font services like Typekit. If support for a wide variety of browsers is needed (or at least, IE8 in particular), this could be considered one of the prices you have to pay when embedding fonts.