@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.
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.
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.