Font Face not working in IE8 as expected

2019-01-25 10:29发布

问题:

I've used the following code to get a custom font in my website! using the following code!

@font-face{
     font-family:portagolTC;
     src: url(../font/PortagoITC_TT.woff?) format('woff');
     src: url(../font/PortagoITC_TT.eot?#iefix) format('opentype');
}

This works in chrome,ff,IE10,IE9 but not in IE8! What am I doing wrong here? Please correct me if I'm doing anything wrong.

Note : I've googled and found few stackoverflow answers but nothing seems to solve my problem.

CSS3111: @font-face encountered unknown error. 
PortagoITC_TT.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf

回答1:

If IE8 throws the CSS3111: @font-face encountered unknown error, you probably have the non-matching font-family name problem.

To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForge application. Afterwards, you than again convert it for web (EOT, WOFF).

More info: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

Update

Made it working by downloading an own version of the TTF font and converted it for web. The CSS I used:

@font-face {
    font-family: 'portagoitc-tt';
    src: url('fonts/portagoitc-tt.eot');
    src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
         url('fonts/portagoitc-tt.woff') format('woff'),
         url('fonts/portagoitc-tt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


回答2:

I had trouble with IE8 and had no console error messages. What solved my problem was to alter my @font-face code slightly:

Before:

@font-face {
    font-family: "Hero";
    src: local("Hero"),
         url("../fonts/Hero.eot?"),
         url("../fonts/Hero.woff") format("woff"),
         url("../fonts/Hero.ttf") format("truetype"),
         url("../fonts/Hero.svg#Hero") format("svg");
    font-weight: normal;
    font-style: normal;
}

After:

@font-face {
    font-family: "Hero";
    src: url("../fonts/Hero.eot"); /* this line made the difference */
    src: local("Hero"),
         url("../fonts/Hero.eot?"),
         url("../fonts/Hero.woff") format("woff"),
         url("../fonts/Hero.ttf") format("truetype"),
         url("../fonts/Hero.svg#Hero") format("svg");
    font-weight: normal;
    font-style: normal;
}


回答3:

Although my company bought the font, all formats (eot, woff etc), I didnt got it to work in IE8 and IE10. I uploaded the ttf format to http://www.fontsquirrel.com/tools/webfont-generator and got a 'webfont'?? version and now it works!!!

Should have watched the console sooner of IE, there is stated permiossion troubles.