Fonts generated with Font Squirrel do not display in IE 9

Question

I have used the Fontsquirrel @fontface Generator to create the CSS for the three fonts I am using. The fonts are displaying properly in every browser including other versions of IE -- but IE 9 is not displaying the fonts.

Here is the CSS:

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

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

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

...and here are the errors I am getting in the IE developer console:

CSS3111: @font-face encountered unknown error.
oswald-light-webfont.eot?#iefix

CSS3111: @font-face encountered unknown error.
oswald-bold-webfont.eot?#iefix

CSS3111: @font-face encountered unknown error.
oswald-light-webfont.woff

CSS3111: @font-face encountered unknown error.
oswald-bold-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
oswald-light-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
oswald-bold-webfont.ttf

I haven't had any luck with the searches I've done, any insight would be much appreciated. Thank you in advance.

Answer 1

I fixed the problem by generating the font files again using the Font Squirrel generator.

I selected the 'expert' control option and changed from 'EOT Compressed' to 'EOT Lite'

The fonts now work in every browser.

Answer 2

I had a similar problem. I received the following error

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: IcoMoon.ttf

My CSS syntax was:

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

I solved it by rearranging it like this:

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

Hope it helps!

Answer 3

To fix CSS114 use this little app: Truetype embedding-enabler

Answer 4

I was having a similar problem where the icons would not show up in any version of IE with Font Awesome. I simply changed the format for IE from "eot" to "embedded-opentype" and that corrected the issue.

EXAMPLE: OLD - src: url('./font/fontawesome-webfont.eot?#iefix') format('eot') NEW - src: url('./font/fontawesome-webfont.eot?#iefix') format('embedded-opentype')