IE @font-face is not working even after ?#iefix is in place

Question

I checked all question regarding this issue here but no luck. Issue is only with IE7 and above, all other browsers it's working fine.

Below is my CSS code

@font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');

}

also tried

@font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
     url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');

}

and here is the test link http://bit.ly/Rtoxgw

If your other @font-face are working fine, try: http://stackoverflow.com/a/12459447/1455709 — Patrick, May 08 '14 at 07:30
@Patrick i'm using Helvetica which is banned by fontsquirrel.com. Does it depends on where we are generating eot file? and do we need to keep fontnames unchanged after generating? — Praveen Govind, May 08 '14 at 07:37
Generate anywhere that allows you, if you mean the file names, it doesn't matter what they are - just as long as your links line up — Patrick, May 08 '14 at 07:42
No it's still not working with same font! I changed font instead. — Praveen Govind, May 14 '14 at 05:01

score 3 · Answer 1 · answered May 08 '14 at 07:19

3

I've had a similar problem where IE ignored the font. The problem then was that the font-family name I used contained too many characters for IE, but worked fine for all the other browsers.

Try shorten down the name HelveticaNeue23UltraLightExtended.

answered May 08 '14 at 07:19

Topr

872
3
21
34

will give a try and see!! – Praveen Govind May 14 '14 at 05:01

score 2 · Answer 2 · answered Aug 09 '14 at 08:56

#iefix after question mark states that, you need that url to search a query parameter that will fool IE and let you use website without wasting cache.Many people call it a cache bursting trick.(you can try anything after # in front of question mark, its just a cache burst technique .)

You need to change the order in which you write the fonts to get data sequentially out of fonts, and if you do incorrect ordering ,you may end up with errors in reading "eot" files, permission install on "ttf" format files try this code, this should work, also you need to locally define this new font as a resource[rename resource files to short names] Also change this when you use it in css, or style sheets. Also shorten the font name... try this:

HelveticaNeueule

@font-face {
font-family: HelveticaNeueule;
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.eot?#iefix') format('embedded-opentype'),
src: local(HelveticaNeueule)
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.ttf') format('truetype'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.woff') format('woff'),
font-weight: bold

The font parameters like bold, italics can be specified later at end of above block as shown,

Hope this will fix your problem...

IE @font-face is not working even after ?#iefix is in place

2 Answers2