Why does IE7 require EOT fonts to include lowercase glyphs when we use text-transform: uppercase?

Question

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, as 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 were actually written as title case (and therefore contained lowercase characters), even though the text-transform property was deployed and characters were appearing in uppercase, IE7 required the lowercase letters to exist in the EOT file to display the uppercase characters. (Intuitive, isn’t it?)

The simple fix was the rebuild the EOT file with both upper and lowercase glyphs, even though the lowercase characters are never used.

• Problem online: http://www.testdomeinnaam.nl/mike/

How can I fix this properly? (i.e. make IE7 render the uppercase characters without having to include lowercase glyphs in the font.)

Thanks!

Answer 1

I think you already have the best fix - just include both uppercase and lowercase glyphs in your .eot.

Your server is using HTTP compression.

The current .eot is 22.62 KB, and it's compressed down to 13.87 KB.

Even if adding the uppercase glyphs doubles the size, it would still only be ~28 KB compressed.

Unless there's a simple "actual fix" to the problem, just stick with this.