Search code examples
cssinternet-explorerfontsinternet-explorer-7font-family

css font-face code not working on IE7 / 8

I used font-squirrel to generate web fonts and specify CSS declarations for the font, but it still uses the fallback fonts when I view the page in IE9 using IE7 or IE8 browser and document mode. Any idea what's going on? Here's my code (and a screenshot):

@font-face {
    font-family: 'cubanoregular';
    src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
    src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


.cubano { font-family: 'cubanoregular' }

enter image description here

Solution

  • If the code you put above is accurate, then the only problem is that your path to the eot file is incorrect:

    src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');...

    Fix that, and it should work fine. IE has supported @font-face since version 5 I believe, but in versions prior to 9 only eot is supported.