FiftyOneReasons

Interactive Media Development + Exploration

IE7 @font-face bug and fix

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. continued…