CODEWITHSUNDEEP
internet-explorer-9font-face
Liam
Liam

Reputation: 4055

@font-face missing characters / glyphs in IE9

I'm having a strange problem while using @font-face on IE9. I converted a TTF of the typeface we want to WOFF, EOT and SVG using font-squirrel

This worked seemingly well and I was able to use Paul Irish's @font-face CSS to get the type working on Chrome/Safari and Firefox. The problem is IE9.

When viewing in IE9, text using the font is missing characters. For example the phrase

The quick brown fox jumps over the lazy dog

Appears as

 h   uick bro n fox ju p  o  r th  lazy do

I set up each font as a separate @font-face declaration to investigate further. Chrome (for example) renders the above phrase fine using WOFF, TTF and SVG. Bizarrely, IE9 renders WOFF and the TTF with the same missing characters. It does not however load the EOT.

Does anyone have any idea what the cause might be? Any help would be appreciated.

Comparison image showing the above visually

Edit 2011.19.12: Thanks all for your answers, I've still not found a solution to this problem. As it happens, one of our designers has found another font that they want to use, rendering the question less critical, however I'd still like to get to the bottom of this.

Upvotes: 3

Views: 4808

Answers (6)

lycorine
lycorine

Reputation: 308

Had this issue today using Cantoni from MyFonts. Displays fine in everything but IE9. I'm using it for headers in a few places. The first one or two characters disappear on every header.

The only thing I did the managed to reliably fix it was adding a   before the header for each missing letter. Not very clean and not too sure why it is working, but it does for me. Unfortunately, it then requires me to use a negative text indent to shift the header back over for it to properly align.

Upvotes: 0

Mon
Mon

Reputation: 86

I just ran into this exact problem yesterday with fonts.com's webfont on IE9 only. Took us hours, but the .eof fonts we were using were somehow corrupted on fonts.com. In my case, we were self hosting the fonts, not via JS. So double check the fonts. Hope that helps.

Upvotes: 0

Sunlight Studios
Sunlight Studios

Reputation: 11

I had this exact problem - two webfonts created via fontsquirrel.com had missing letters in IE9 but no other browser. It seems v9 is the only IE version picking up the .woff file for webfonts, and although other browsers used mine just fine, IE did not. Bizarrely, I solved this problem by using the command-line tool sfnt2woff which converts .oft & .ttf files info .woff files. I kept all the other webfont files that fontsquirrel generated, but replaced the .woffs on both broken fonts with those from sfnt2woff, and everything worked fine in IE9.

Upvotes: 1

Anish Gupta
Anish Gupta

Reputation: 2226

Try using <!--[if IE9]><[endif]--> conditional tags to display a font that works in IE.

I would contact Microsoft about the issue, they might give a fix or roll out some hotfix on Windows Update or something.

Upvotes: 1

one.beat.consumer
one.beat.consumer

Reputation: 9504

To me it sounds like something is wrong with the way IE9 is rendering the format right but other browsers are... either (a) a compatibility issue with the font type, or (b) corruption in the conversion that IE can't handle? I could not reproduce the symptom so this may not be the true answer.

I would do fresh conversions with squirrel, and perhaps use script to detect browser agent and load the most IE compatible font-faces when necessary, and then the nice ones for Chrome/FF and other webkit browsers.

let me know if this helps.

Upvotes: 2

Michael T. Maeder
Michael T. Maeder

Reputation: 1

Try to experiment with the letter-spacing, this might help.

http://forums.mozillazine.org/viewtopic.php?f=9&t=2326571

Upvotes: 0

Related Questions