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