Multiple webfonts + Fallback

Question

I'm having multiple fonts included in my website, and i'm not sure am I doing it right. For example, I have font 'Avenir medium', and Avenir black'.

I include them with compass like this:

@include font-face(
  'Avenir_black',
  font-files(
    'avenir-black.woff', woff,
    'avenir-black.svg', svg,
    'avenir-black.ttf', ttf),
    'avenir-black.eot'
);

@include font-face(
  'Avenir_medium',
  font-files(
    'avenir-medium.woff', woff,
    'avenir-medium.svg', svg,
    'avenir-medium.ttf', ttf),
    'avenir-medium.eot'
);

Then I create a mixin so I can easy add them like this:

@mixin avenir( $family: 'medium', $size: $base-font-size, $weight: 400, $style: normal ) {

  font: {
    family: 'Avenir_#{$family}', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    style: $style;
    weight: $weight;
  }
  @include rem( font-size, $size );
}

usage:

@include avenir('black', 24px);

My question here is actually about weight and fallback fonts. Weight is 400 by default, so font doesn't look bad, but then is problem with fallback. If I use 'Avenir black', he has weight of 400 but looks like black, if for some reason font is not loaded, then 'Helvetica Neue' or 'Arial' will be shown, but also with weight of 400, but actually it should be weight of 700, but if I put 700, then Avenir black will get bolder then he should be.

Any advice, am I doing it wrong, is there some other way?

Answer 1

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