Webfonts used within font fallback in IE8

Question

I’m currently trying to implement webfonts on the site I build, I want to use it as a fallback within the font-family attribute, i.e. If the character is not represented in Arial / Helvetica then it should be within the webfont used.

I realise this will not work in IE6 and 7 but expected it to work in IE8 which it doesn’t seem too.

I was just wondering if anyone had ever had any experience of this problem and if using a webfont as a fallback font was possible in IE8 or if anyone can just see that I'm just doing something wrong within the code.

Thanks in advance, for any help

Here is my css code:

@font-face {
    font-family: 'stix';
    src: url('/webfonts/webfont.eot');
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold-webfont.eot');
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/talic-webfont.eot');
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold_italic-webfont.eot');
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
    font-weight: bold;
    font-style: italic;

}

body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

Answer 1

I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).

I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralbol-webfont.eot');
    font-weight: bold;
    font-style: normal;
}
body {font-family: arial, stix, sans-serif;}

… but this does not work 100% of the time (although sometimes it does display the chars!):

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
    font-weight: normal;
    font-style: italic;
}
body {font-family: arial, stix, sans-serif;}

The reason for this appears to be that the STIX fonts package has errors.

In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.

Answer 2

What's the benefit of using STIX as a fallback?

If it's to prevent the UA downloading the font unless it's needed, you're out of luck, only webkit has that behaviour currently https://gist.github.com/478344 Worse still, IE will download all the fonts defined in @font-face even if they're not referenced anywhere else in the CSS.

If it's because STIX doesn't have regular chars, yeah, IE's going to screw you over here. I'd recommend merging STIX with a free typeface to create one deliverable that has all the chars you need.

Answer 3

The problem might be that "in Internet Explorer 8 and earlier versions, only one URL value is supported".

Also, rather than using @font-face for a fall-back font, choose one you'd prefer and don't declare "arial, helvetica" in which ever order, instead falling straight back on sans-serif. This way, the most suitable sans-serif is used on each platform, such as Arial for Windows and Helvetica for OS X, etc.

Answer 4

Try to use converter on fontsquirrel.com

Answer 5

Btw... IE will try to load SVG format so you should define EOT src after svg! (IE bug).