Internet Explorer 9 Font Glitch

I’ve run into several IE quirks in my time, but this is the first stumper I’ve had since IE8. The symptom was content not appearing below the header, but styles and content above that were loading fine. In addition this error did not show up on local test environments, even when emulating the same version of IE (9). On top of that some computers the client was using worked fine, while others did not.

The first theory was that the browser was getting flipped into compatibility mode. This can happen for a couple of reasons, one of which is if the site lives on an intranet (which might explain why only some computers were having issues). This is easy enough to remedy by implementing the X-UA-Compatible meta tag.

Unfortunately the meta tag was not enough.

After digging a bit deeper the client was receiving an error:

A problem displaying [site] caused Internet Explorer to refresh  the webpage using Compatibility View

This brought up a different set of solutions on Google, which seemed to point to an issue with fonts (particularly Helvetica). The styles for this site did use Helvetica Nueue Light in a font stack with fall backs to Helvetica and Arial. This lined up with the symptom as well, since some users may not have Helvetica (or the other variants) installed on their system.

Removing references to Helvetica (and other variants) seemed to fix the issue, however, I was still curious because I had thought browsers would ignore fonts they could not handle. It turns out this occurs when the type of font used is Adobe Type 1. So the style is correct in reading that the font exists and to use it, but freaks out when it actually tries to use it. This could be seen in the browser where text used one of the broken fonts there would be a blank space on the page.

Here is a good post detailing the issue with IE9 and Adobe Type 1 fonts, along with some potential solutions.