Custom Web Fonts: IE8 and Different Font Weights

13 October 2011

If you'll remember a few posts back, I described how to import custom fonts for different weights. It turns out that this works for most browsers except IE8 (and probably 7, and 6, and so on). The original css to do the import was:

@font-face{ 
    font-family: 'MyFont';
    src: url('fonts/MyFontFile.eot');
    src: url('fonts/MyFontFile.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFile.woff') format('woff'),
         url('fonts/MyFontFile.svg#webfont') format('svg');
}

@font-face{ 
    font-family: 'MyFont';
    src: url('fonts/MyFontFileItalics.eot');
    src: url('fonts/MyFontFileItalics.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFileItalics.woff') format('woff'),
         url('fonts/MyFontFileItalics.svg#webfont') format('svg');
        font-style: italic;
}

@font-face{ 
    font-family: 'MyFont';
    src: url('fonts/MyFontFileBold.eot');
    src: url('fonts/MyFontFileBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFileBold.woff') format('woff'),
         url('fonts/MyFontFileBold.svg#webfont') format('svg');
        font-weight: bold;
}

What IE8 doesn't like, though, is overloading the font-family: it only seems to register the first font-face for a font-family name it's given, and doesnt seem to like font-weight inside font-face either. So when you use the code above in IE8, instead of using the proper bold font-face, it does a "faux-bold", which is sometimes acceptable, but normally horrendous. The only real way to fix this (and is what font-squirrel does) is to use separate font-family names and use font-family instead of font-weight in your IE-specific stylesheet:

@font-face{ 
    font-family: 'MyFont';
    src: url('fonts/MyFontFile.eot');
    src: url('fonts/MyFontFile.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFile.woff') format('woff'),
         url('fonts/MyFontFile.svg#webfont') format('svg');
}

@font-face{ 
    font-family: 'MyFontBold';
    src: url('fonts/MyFontFileBold.eot');
    src: url('fonts/MyFontFileBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyFontFileBold.woff') format('woff'),
         url('fonts/MyFontFileBold.svg#webfont') format('svg');
}

h1{
    font-family: MyFontBold;
}

It's hacky, I know, but it works - let me know if you've got other techniques to solve this issue :)

Tags: bold, css, IE8, fonts

Add a Comment

No Comments