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
Related
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;
}
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.
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");
}
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.
http://www.milknhny.co.uk/
I have a fontface call on my CSS for the above, but for a bizarre thing its not displaying on chrome at my work, yet works at home!
My call is :
#font-face {
font-family: Bazar;
src: url(http://www.milknhny.co.uk/fonts/Bazar.ttf);
src: url(http://www.milknhny.co.uk/fonts/Bazar.eot);
src: url(http://www.milknhny.co.uk/fonts/Bazar.svg);
src: url(http://www.milknhny.co.uk/fonts/Bazar.woff);
}
Any ideas why it wouldnt be working on my chrome, as i thought by calling all the above that it would be suitable cross browser.
thanks
Update:- The below fixed the chrome problem... however still not working in IE... any ideas?
You probably had not actually uploaded the font files. This seems to have caused a redirection and then a 404 Not Found response from a server. (The initial problem was a malformed #font-face rule, which you fixed in your answer.)
The problem seems to have been fixed now.
I fixed this by doing the below: (slight changes)
#font-face {
font-family: 'Bazar';
src: url('fonts/bazar.eot');
src: url('fonts/bazar.eot?#iefix') format('embedded-opentype'),
url('fonts/bazar.woff') format('woff'),
url('fonts/bazar.ttf') format('truetype'),
url('fonts/bazar.svg#bazarmedium') format('svg');
font-weight: normal;
font-style: normal;
}
thanks anyways :D