Search code examples
cssinternet-explorer-8font-face

Font Face not working in IE8 as expected


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

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