On a recent website project I took a progressive enhancement approach to front-end development and started building the site out on a virtual machine configured to the client’s corporate set up – Internet Explorer 8 running on Windows XP.
Custom Fonts Causing Havoc
All was going well until I started plugging in custom fonts. The project included several widely-used web fonts and a custom font created via IcoMoon. After setting up all the fonts I refreshed the browser to find it was being forced into compatibility mode! I started trouble-shooting:
- I took a look at my meta tags and the “X-UA-Compatible” tag was set to “IE=edge” to inform IE to render its most current version. I declared IE8 specifically and that had no effect.
- I checked the page on other VM configurations including IE8 on Windows Vista and everything worked just fine. The problem was specific to the Windows XP and IE8 setup.
- I started commenting out font-face decorations one at a time, clearing the domain from the browser compatibility mode settings, and refreshing until all that was left was the custom font.
- I followed the steps above with the custom font and refreshed.
No more compatibility mode prompt!
Custom Web Font – Why Are You So Special?
This signaled there was something unique to the custom font set that was making IE uncomfortable. But I couldn’t figure out what it was.
I thought it might have something to do with the font being used within pseudo elements so I tested that theory by using characters from one of the properly functioning fonts. The page refreshed with no issue.
But then while chatting with a fellow Clockworker he mentioned running into a similar problem on a different project. In that case it appeared to be a single non-Latin character that was sparking the compatibility-mode prompt. With that in mind I went back to look at the IcoMoon setup. The font was configured to use Private Use Area characters, which are a range of Unicode characters intentionally left undefined. This can be beneficial with the use of icon fonts since screen readers will not read the alphabet used for the “content” property within the pseudo elements.
Character Encoding Saves the Day
I changed the encoding to use basic Latin characters and included the updated font in my project then refreshed…no more compatibility mode prompt! Hurray.
If you need to offer IE8 support for your web project be sure to check it on Windows XP since that’s a common setup. If the site is being forced in to compatibility mode try the following:
1. Check your meta tags.
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
This should inform IE to use the current rendering engine
2. Comment out fonts
Comment out any web fonts, especially icon fonts displaying in pseudo elements to determine if one of them is the culprit for the forced compatibility mode.
3. Check the Unicode characters of the suspect font
Is the font using Private Use Area characters? Can they be changed to use Basic Latin? If so, make the change to basic Latin and try again. You may find the compatibility mode issue is solved.