SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kenoli View Post
    As soon as I add an html5 doctype to the page in the form <@doctype html> ...
    You should indeed use a doctype, but make sure it's a valid one. The HTML5 doctype (or really generic doctype) is:

    Code:
    <!DOCTYPE html>
    FontSquirrel is a good service for generating the font files you need.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry, typo in post. I didi add the correct doctype and it did prevent font-face fro

    Quote Originally Posted by ralph.m View Post
    You should indeed use a doctype, but make sure it's a valid one. The HTML5 doctype (or really generic doctype) is:

    Code:
    <!DOCTYPE html>
    FontSquirrel is a good service for generating the font files you need.
    Sorry, typo in post. I did add the correct doctype (
    Code:
    <!DOCTYPE html>
    ) and it did prevent font-face from working as described.

    --Kenoli

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry, typo in post. I did add the correct doctype and it did prevent font-face fro

    Quote Originally Posted by ralph.m View Post
    You should indeed use a doctype, but make sure it's a valid one. The HTML5 doctype (or really generic doctype) is:

    Code:
    <!DOCTYPE html>
    FontSquirrel is a good service for generating the font files you need.
    Sorry, typo in post. I did add the correct doctype (
    Code:
    <!DOCTYPE html>
    ) and it did prevent font-face from working.

    --Kenoli

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I doubt that a doctype is really the issue here. Are you able to provide a link? And have you tried validating your code?
    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:

    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:

    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:

    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You've commented out the font that IE9 wants.
    Code:
    /*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. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You've commented out the font that IE9 wants.
    Code:
    /*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.
    Wow, thanks. I never read anywhere that IE9 wanted the woff format. I will try it.

    --Kenoli

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are using an IIS sever there may be issues with Woff.

    Read this article if this is your issue.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •