IE7 @font-face bug and fix
Wayne Helman on February 17, 2010
2 Comments
This week we stumbled upon a rather odd bug in IE7 (surprise, surprise) when embedding a EOT font file using the @font-face construct. To save on bandwidth, we often edit out sets of characters from a font that we know will not be used on a site. In this particular instance, we were using this font for headers that were all composed in title case, but displayed in uppercase using the text-transform property. Logically, we saved all our font files with only the uppercase characters-we simply don’t use the lowercase. The site rendered perfectly in every browser (including IE6 and IE8) that supported the @font-face construct with the notable exception of IE7.
IE7 only displayed the first character of each word in the proper font-the rest of the characters were displaying in the browsers default font. Scratching our heads, we finally figured out that since the headers where actually written as title case-and therefore containing lowercase characters, that even though the text-transform property was deployed and characters where appearing in uppercase, IE7 required the lowercase letters to exist in the EOT file to display the uppercase characters (intuitive isn’t it). So the simple fix was the rebuild the EOT file with both upper and lowercase even though the lowercase characters are never used.
April 26th, 2010 @ 3:00 AM
I have the exact same problem as described in the article above “IE7 @font-face bug and fix”. I’m using Font Squirrel to generate my code. I check the Expert radio button so it will allow me to make custom changes like for example checking the lowercase and the uppercase checkboxes like you recommend. But the problem in IE 7 remains. Any ideas, hints, tips or tricks that you might have would be greatly appreciated.
Best regards
Martin
May 15th, 2010 @ 8:48 AM
Are you using “text-transform” in the CSS? Try hard coding the content in uppercase and see if that does the trick.