css3, html5, IE9 (and 7 & 8) and @font-face

HTML & CSS
1

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):

@font-face {
font-family: ‘FranklinGothic’;
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.
fg.ttf

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.

–Kenoli

2

You should indeed use a doctype, but make sure it’s a valid one. The HTML5 doctype (or really generic doctype) is:

<!DOCTYPE html>

FontSquirrel is a good service for generating the font files you need.

3

Sorry, typo in post. I did add the correct doctype (

<!DOCTYPE html>

) and it did prevent font-face from working as described.

–Kenoli

4

Sorry, typo in post. I did add the correct doctype (

<!DOCTYPE html>

) and it did prevent font-face from working.

–Kenoli

5

I doubt that a doctype is really the issue here. Are you able to provide a link? And have you tried validating your code?

6

Here are three links that demonstrate the issue:

http://ournightkitchen.com/test_ff/test_ff_nh.php

This works in IE9. Here is the code:


<head>
<title></title>

<style text/css>

@font-face {
    font-family: 'Tall3Paul';
    src: url('tallpaul.eot'); /* IE9 Compat Modes */
    src: url('tallpaul.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
         /*url('webfont.woff') format('woff'), /* Modern Browsers */
    src: url('tallpaul.ttf')  format('truetype'); /* Safari, Android, iOS */
         /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
 
#testFont {
	font-family: 'Tall3Paul';
	font-size:xx-large;
	color: red;
}

</style>



</head>
<body>

<div id="testFont" >This is the tall Paul Header.</div>

</body>
</html>

http://ournightkitchen.com/test_ff/test_ff_h.php

This code does not work in IE9. Note that the only difference is the addition of “<!DOCTYPE html>”. Here is the code:


<!DOCTYPE html>
<head>
<title></title>

<style text/css>

@font-face {
    font-family: 'Tall3Paul';
    src: url('tallpaul.eot'); /* IE9 Compat Modes */
    src: url('tallpaul.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
         /*url('webfont.woff') format('woff'), /* Modern Browsers */
    src: url('tallpaul.ttf')  format('truetype'); /* Safari, Android, iOS */
         /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
 
#testFont {
	font-family: 'Tall3Paul';
	font-size:xx-large;
	color: red;
}

</style>



</head>
<body>

<div id="testFont" >This is the tall Paul Header.</div>

</body>
</html>

http://ournightkitchen.com/test_ff/test_ff_h_meta8.php

This code works in IE9. I has the html5 header but also the added meta code. Here is the code:


<!DOCTYPE html>
<head>
<title></title>

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<style text/css>

@font-face {
    font-family: 'Tall3Paul';
    src: url('tallpaul.eot'); /* IE9 Compat Modes */
    src: url('tallpaul.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
         /*url('webfont.woff') format('woff'), /* Modern Browsers */
    src: url('tallpaul.ttf')  format('truetype'); /* Safari, Android, iOS */
         /*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
 
#testFont {
	font-family: 'Tall3Paul';
	font-size:xx-large;
	color: red;
}

</style>



</head>
<body>

<div id="testFont" >This is the tall Paul Header.</div>

</body>
</html>

It works in IE9 without the html5 header or with it and with the IE8 meta tag. It does not work with the html meta tag.

The IE error I get is:

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

Thanks,

–Kenoli

7

You’ve commented out the font that IE9 wants.


/*url('webfont.woff') format('woff'), /* Modern Browsers */

The eot fonts are for IE9 in quirks mode or ie8 and under which is why they work without a doctype or when emulating IE8.

You need to give IE9 the woff font as per the font-squirrell syntax and not play around with it. Everything is in there for a reason.

8

Wow, thanks. I never read anywhere that IE9 wanted the woff format. I will try it.

–Kenoli

9

I added the woff and svg fonts, even regenerated the whole st on font-squirrel, and am having the same issue. What is your reference for IE9 using woff fonts. I couldn’t find a reference saying that anywhere. Every reference I found says it uses, eot fonts, including some Microsoft articles I found.

I’m baffled.

–Kenoli

10

If you are using an IIS sever there may be issues with Woff.

Read this article if this is your issue.