Font Face not working in IE8 as expected - css

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.

Related

font-face not working in IE9 only

I've seen several questions asked here and on other blogs but it didn't solve my case. This is my syntax:
#font-face {
font-family: "texgyreheroscn";
src: url("texgyreheroscn-italic-webfont.eot");
src: url("texgyreheroscn-italic-webfont.eot?#iefix") format("embedded-opentype"),
url("texgyreheroscn-italic-webfont.woff") format("woff"),
url("texgyreheroscn-italic-webfont.ttf") format("truetype"),
url("texgyreheroscn-italic-webfont.svg#texgyreheroscnitalic") format("svg");
font-weight: normal;
font-style: italic;
}
this works everywhere except in IE9 (IE8 works too). The syntax looks fine to me, the .eot file is on the server and has permissions to be accessed.
i've tried
adding src: local('☺︎'), - this breaks the font for every browser (as seen on #font-face works in IE8 but not IE9)
asked the backend guys if the .eot font was there and was accessible and the answer is YES
substituted the " with '
added format("embedded-opentype") on the first src: line
nothing seems to work for me. any heads up on this? thanks

Unable to get the Font-Family as required

I have my font-family in the following order. It works fine in one server but in another server its reading the second font-family(verdana) instead of the first(breuer-text-medium). I have the fonts installed correctly in their locations but not sure what is missing. Can some one please help me.
#font-face {
font-family: "breuer_textmedium";
font-style: normal;
font-weight: normal;
src: url("fonts/breuertext-medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/breuertext-medium-webfont.woff") format("woff"), url("fonts/breuertext-medium-webfont.ttf") format("truetype"), url("fonts/breuertext-medium-webfont.svg#breuer_textmedium") format("svg");
}
The problem was with the access privileges to s3 server.

#font-face not working in ie8 - the revenge

Yes, I know there is an identical question and many similar ones asked and answered here and many resources online discussing this issue. None have helped in my case so I am taking desperate measures.
I am trying to load web fonts using the #font-face syntax. Here's the code (I am loading more than one but the syntax is identical):
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: local('?'),
url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As stated in the title, it's not working in ie8 (works fine in ie9 and 10 and obviously all other browsers). I have tried several things.
In the beginning, I got the error "CSS3111: #font-face encountered unknown error" and I found this site. I followed the steps, changed the names of the fonts and regenerated them. Apparently, that must have fixed something because I am not getting that error anymore. I also see the fonts being loaded correctly in the network sniffer, all coming back with a clean 200.
I have cleared my cache (several times) but still no dice. The font still doesn't show up on the page. Instead, the fallback "Arial" font is displayed, messing up the layout because it's way bigger than the web font.
Anyone got a clue what the eff might be going on?
I have several projects which load fonts down to IE8. They have an almost identical definition to the one you have but, without the src : local(?).
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}

#font-face for IE8 weird behaviour

I use fontsquirrel's CSS for #font-face:
#font-face {
font-family: 'pf_agora_serif_promedium';
src: url('pfagoraserifpro-medium-webfont.eot');
src: url('pfagoraserifpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('pfagoraserifpro-medium-webfont.woff') format('woff'),
url('pfagoraserifpro-medium-webfont.ttf') format('truetype'),
url('pfagoraserifpro-medium-webfont.svg#pf_agora_serif_promedium') format('svg');
font-weight: normal;
font-style: normal;
}
It works correctly in all browsers if
a)I use fonts that fontsquirrel generated.
b)I don't use cyrilic charset or another characters that could be on my font file but fontsquirrel does not converting at all (like russian letters ЯЩЮИГЛЬЦЫЧ)
So, when I changed my font files on my directory to another (which contain russian letters) IE9 and lesser don't show my font at all, even if I use only latin charset, but it works correctly (with latin and cyrilic charset) in normal browsers. So what's wrong. Does the problem inside of font files? And if not, why font-face don't working when I changing only font files?
p.s. I'd tried to use another CSS for font-face but they didn't work at my web-site.
i think fonts path is not giving you,
Please check fonts local path, may i sure working in all browser this #font-face kit,
EOT fortmat for ie8 and ie 9
#font-face {
font-family: "pf_agora_serif_promedium";
src: url("yourlocalpath/pfagoraserifpro-medium-webfont.eot");
src: local("☺"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.woff") format("woff"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.ttf") format("truetype"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.svg#LucidaFax-bold") format("svg");
}

#font-face css code bug. Missing something

I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.

Resources