Fonts created with Font Squirrel not showing up in IE 9

Question

I used the Fontsquirrel @fontface Generator to create CSS for the three fonts that I use. Fonts display correctly in every browser, including other versions of IE, but IE 9 does not display 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 get in the IE developer console:

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

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

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

CSS3111: @ font-face unknown error detected.
Oswald-bold-webfont.woff

CSS3114: @ font-face failed to perform OpenType permission check. Permission must be set. oswald-light-webfont.ttf

CSS3114: @ font-face failed to perform OpenType permission check. Permission must be set. Oswald-bold-webfont.ttf

I was not lucky with the searches I did, any insight would be greatly appreciated. Thank you in advance.

Answer 1

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

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

Fonts now work in every browser.

Answer 2

I had a similar problem. I got the following error:

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

My CSS syntax is:

 @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 this 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 this helps!

Answer 3

To fix CSS114, use this small application: Truetype embedding-enabler

Answer 4

I had a similar problem when the icons did not display in any version of IE with Font Awesome. I just changed the format for IE from "eot" to "embedded-opentype" and fixed the problem.

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