Internet Explorer automatically switches to compatibility mode (IE9 and IE10)

css fonts internet-explorer-9 internet-explorer-10 compatibility-mode
webextensions.org picture webextensions.org · Feb 21, 2013 · Viewed 9.5k times · Source

On certain page on my site, Internet Explorer automatically switches to compatibility mode and tries to render the page in compatibility view (IE7 mode). Also the URL gets added to the compatibility view list.

Answer

webextensions.org picture webextensions.org · Feb 21, 2013

In my case, it happened due to some CSS using Type 1 font (Helvetica).

Internet Explorer changed its font-rendering from IE9 (affects IE10 as well) which does not support the old Type 1 fonts. But still some users manually install fonts (for me, it was Helvetica, tested on Windows 7, IE9 and IE10 both).

Now if you use CSS like: font-family: Helvetica, Arial, sans-serif; rather than falling back for Arial, IE9 and IE10 switch to compatibility mode.

More details can be found at: http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html

As per the mentioned blog post, following approaches would help resolve the problem for the web developers:

  • Don't use Helvetica or other non-standard fonts in your CSS
  • Use a substitute web font with the CSS @font-face feature to serve up your desired fonts
  • Use an online web fonts service like webfonts.fonts.com
  • Use Conditional Comments to create IE9 specific stylesheets.

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More
How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from …

Read More