IE9 @font-face encountered unknown error

Question

I'm having an issue with @font-face on IE9 (windows 7). IE 8 on XP and all browsers on mac give me no probs. Just IE9.

I'm embedding my font like so:

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

It doesn't render the font and gives me the following error in the console:

CSS3111: @font-face encountered unknown error. 
wendylpstd-medium.eot

I have another font which I am embedding - and it is displaying correctly. What could be causing the ever fantastic IE9 to be crying over this?

I tried convertfonts dot com . The only other I could find was fontface.codeandmore dot com and that is a paid service — Fraser, Apr 12 '13 at 14:39
Alright. This seems to be a [somewhat common question](http://stackoverflow.com/questions/9705327/font-face-ie-problems). Have a look there. — Sampson, Apr 12 '13 at 14:41
Possible duplicate of : http://stackoverflow.com/questions/11559592/ie9-css3111-font-face-encountered-unknown-error . Also, take a look at search result : https://www.google.ca/search?num=100&hl=fr&newwindow=1&q=CSS3111%3A+%40font-face+encountered+unknown+error.+site%3Astackoverflow.com — Milche Patern, Apr 12 '13 at 14:47

score 2 · Answer 1 · answered Apr 12 '13 at 14:39

And now to our main highlight - the "CSS3111: @font-face encountered unknown error". This error is very ambiguous. If you have a look at MSDN again, you'll see its description says: "An unknown problem was encountered with the "Web Open Font Format (WOFF)", and "Embedded OpenType font (EOT)" of the Cascading Style Sheets (CSS) font". "Unknown Problem" doesn't sound too good to me - how am I supposed to solve an unknown problem? Fortunately we're given a hint here. It says: "Check source of the fonts". Indeed, CSS3111 is usually caused by an issue with the font's binary source. One of the popular online TTF to EOT converters for example produces EOT files with a NAME table that doesn't comply to the Microsoft standards, which results in EOT fonts that never load in IE and produce the CSS3111 error. So, when you experience a CSS3111, it is always good to try using a different TTF to EOT converter or font face generator.

Source: http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

I did just like you : googled '**CSS3111: @font-face encountered unknown error.**' and .. came to same conclusion than you. — Milche Patern, Apr 12 '13 at 14:46
yeah that is a right approach always search for the error number. good work. — KKS, Apr 12 '13 at 14:47
Yoda, take a look at this : https://www.google.ca/search?num=100&hl=fr&newwindow=1&q=CSS3111%3A+%40font-face+encountered+unknown+error.+site%3Astackoverflow.com — Milche Patern, Apr 12 '13 at 14:48

score 1 · Answer 2 · edited Nov 09 '16 at 15:38

1

You have to convert your font to base64.

Use this fiddle to convert your woff font file to base 64.

Use the output from step 1 in your CSS file like this:

src: url(data:application/x-font-woff;charset=utf-8;base64, [base 64 value from step 1 without brackets] ) format('woff');

The final result will look something like this, where your base64 is the value from step 1: WebFont include example

Good luck!

edited Nov 09 '16 at 15:38

SharpC

6,974
4
45
40

answered Feb 19 '14 at 15:08

nikoloza

968
2
12
30

Although it looks bizarre it does actually work, although unfortunately it then stopped the font from working in Firefox and Chrome. – SharpC Nov 09 '16 at 15:18
@SharpC never checked, but I'm guessing leaving `woff` url before, or after `base64` solution could work. – nikoloza Nov 09 '16 at 16:47
Seems that it was a rogue `.eot` font that was causing a Firefox issue - removed that and now works great, thanks! – SharpC Nov 09 '16 at 18:43

score 0 · Answer 3 · edited Jun 28 '13 at 13:26

try to use a simple line to define font-face in your css, and use absolue urls, for exemple

@font-face{
    font-family:'wendy_lpregular';
    src:url('your-web.com/fonts/wendylpstd-medium.eot');
    src:url('your-web.com/fonts/wendylpstd-medium.eot?#iefix') format('embedded-opentype'),
    url('your-web.com/fonts/wendylpstd-medium.woff') format('woff'),
    url('your-web.com/fonts/wendylpstd-medium.ttf') format('truetype'),
    url('your-web.com/fonts/wendylpstd-medium.svg#GothamRM') format('svg')
}

Check if you can open in IE the file (your-web.com/fonts/wendylpstd-medium.woff), If you recive error 404 go to IIS, double-click the "MIME Types" configuration option while having IIS root node selected in the left panel and click "Add..." link in the Actions panel on the right. This will bring up the following dialog. Add .woff file extension and specify "application/x-font-woff" as the corresponding MIME type

I use this instrucctions in this site (Robòtica educativa), I convert my original .ttf font on (http://www.font2web.com/)

IE9 @font-face encountered unknown error

3 Answers3