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.