Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 394
Imesh Chandrasiri Avatar asked Oct 03 '13 05:10

Imesh Chandrasiri


People also ask

What is the font face rule?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

How to use font face in html?

The HTML <font> face Attribute is used to specify the font family of the text inside <font> element. Attribute Values: It contains single value font_family which is used to specify the font family. Several font family can be used by separating comma. Note: The <font> face attribute is not supported by HTML5.

Does IE support WOFF?

Fonts are provided in WOFF and WOFF2 format, which collectively cover all major browsers: Chrome (on desktop and iOS/Android), Firefox, Safari (on Mac and iOS), Internet Explorer, Edge, and others.


2 Answers

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;
}
like image 159
Mike Vranckx Avatar answered Oct 18 '22 21:10

Mike Vranckx


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;
}
like image 31
2C-B Avatar answered Oct 18 '22 22:10

2C-B