Search code examples
internet-explorerfontscross-browserfont-facewebfonts

IE Font-face issues & solutions we tried

I know this is a common problem, I tried pretty much every solution I could find, and I wondered if showing a little bit of code would be more useful.

The issue

I am trying to implement 4 font-faces for a client. The current files have been generated with font-squirrel. However, the fonts are not working at all for IE 7/8, and partially working for IE9.

The cross-browser rendering of the font itself is not the problem here, I just want it to be displayed.

What we've tried

We spent (at the company I am working for) a lot of hours doing the following :
- Multiple syntaxes we found, the font-squirrel one being the more complete.
- Reloading the CSS in JavaScript, seconds after the page is loaded (worked for an old project).
- Check all the syntax issues.
- Check if there was a 404 error
- Putting the same name, but witfh different font-weight
- Tried to add ?#iefix and the specific format used

Screenshot

enter image description here

Sample Code

You can see it live at : http://dev.phin.fr/fontsie/

Syntax

@font-face {
            font-family: 'DidotBoldItalic';
            src: url('fonts/DidotHTF-24BoldItalic.eot');
            src: url('fonts/DidotHTF-24BoldItalic.ttf') format('truetype'), url('fonts/DidotHTF-24BoldItalic.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

Thank you!

Solution

  • I took the liberty of downloading all the files and code from your example.

    I notice that you are missing the «local('☺')» attribute in your CSS declaration, take a look at the third line of the following example:

    @font-face {
    font-family: 'SofiaProBold';
    src: url('Sofia-Pro-Bold.eot');
    src: local('☺'), url('Sofia-Pro-Bold.ttf') format('truetype'), url('Sofia-Pro-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

    You can see the result in IE8 (PC) at http://imageftw.com/uploads/20130116/font-fix.png

    This little trick fixes the problem for the Sofia font but, unfortunately, does not work for the Didot font. I can assume that the font is not originally a web font or has copyrights and fontsquirrel fails to transform it.

    The following is only my personal opinion.

    When working with fonts, try to put all your @font-face declarations in a CSS file within the same directory that has all your font files and then just link such CSS file to the <head> of your document.

    Example:

    /fonts/myfont/myfont.css « add to the document's <head>
/fonts/myfont/myfont.woff
/fonts/myfont/myfont.eot
/fonts/myfont/myfont.ttf
/fonts/myfont/myfont.svg

    This will not only make easier to find the @font-face applied but will also avoid the use of relative/absolute paths within the url('myfont/font.ttf') attribute.