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!

Owlet

Did you try putting text-transform before @font-face? Also check whether IE6 renders correctly without your IE7JS script. – Ruination

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.

Manille

If you do find an actual fix to this, please leave a comment on my answer to let me know. Thanks. – Manille

Answer 2

Is it an option to transform the case on the server-side? For example, php has this: http://php.net/manual/en/function.strtoupper.php

That might fix your IE7 problem, if it's practical to use such a function.

Culottes

Answer 3

a just had the same problem and solved it quick:

for ie7 to render the font correct with text-transform "uppercase" it's enough for ie7 that the lowercase-letters are defined in the font file, they don't need to contain real letters = they lowercase-letters in the font-file can be empty and the size of the font does not increase.

Bahamas