CODEWITHSUNDEEP
cssinternet-explorerfontsinternet-explorer-7font-family
mheavers
mheavers

Reputation: 30158

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

Upvotes: 0

Views: 1328

Answers (3)

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

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.

Upvotes: 2

MikeM
MikeM

Reputation: 27405

check your src path is correct

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');

probably needs to be 

src: url('../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');

Upvotes: 0

Calvein
Calvein

Reputation: 2121

Nothing wrong with your code, the problem seems to be the font. But it's on Typekit if you want.

Upvotes: 0

Related Questions