I am beating my head against the wall trying to get font-face to work in IE9 (and ultimately IE 7 & 8).
I am using ttf2eot, a unix utility installed on OS X Mountain Lion to generate eot files for IE.
My font-face code work fine when I use simply an <html> tag and no doctype. Here's the code (some fonts are missing as I am trying it out in Safari, Firefox and IE before going further):
src: url('../__fonts/fg.eot'); /* IE9 Compat Modes */
src: url('../__fonts/fg.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
/*url('webfont.woff') format('woff'), /* Modern Browsers */
src: url('../__fonts/fg.ttf') format('truetype'); /* Safari, Android, iOS */
/*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
As soon as I add an html5 doctype to the page in the form <@doctype html> I get the following error message from IE:
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
Searching around, this seems to mean that IE doesn't like the headers in my font (it has responded the same to all the fonts I have tried so far). I have fontforge installed on my computer, but am not sure how to use it to set the headers, nor how IE wants them set.
If I add:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
To the head of my page it works, but I suspect I will have other problems.
Interestingly it seems to work in Safari and Firefox with no doctype tag ( just the <html> tag).
It's tempting to simply leave things with no doctype, though I am concerned this could also cause other problems.
I'd love any insights into this issue.