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
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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With