Font Face not working in IE8 as expected

Question

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

Solution 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;
}

Solution 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;
}

Solution 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.

Comments

[Mike Vranckx]

Just tried it locally and it is working on all browsers (including IE7 and IE8). I've download the 'PortagoITC TT' font TTF format and converted it for web. The CSS I used: &at;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; } It seems to be a problem with your font files. Which tool did you use to convert?

[Imesh Chandrasiri]

If you could let me know where you downloaded the font and converted it, it might help me. and could you please add the CSS in your answer..

[Mike Vranckx]

I've downloaded it from font.downloadatoz.com/font,108525,portagoitc-tt.html and coverted it using font2web.com Let me know if it works at your side.