Why won’t certain websites load in IE9?
This is a question which unfortunately is being asked A LOT right now by many people across the globe[4] [5] [6] [7] [8] [9]. The answer can be as varied and as numerous as the people who are asking it, as we can see in Microsoft’s own knowledge base article on the topic here http://support.microsoft.com/kb/967897 ...fairly comprehensive indeed, however it fails to mention the issue we will look at here. In this article I seek to highlight one of the number one causes of websites not loading properly in IE9, now I know what you’re thinking at this point… “It’s teh haxorz” …or “it’s IE and IE sucks always has and always will”. While this may be a popular generic canned response by most, the answer is actually neither of these things. The answer to the question why random websites will not load in IE9 is quite strangely enough a conflict with a specific type of font …that’s right I said a font. You see there is a specific type of font called an Adobe Type 1 font, this font type was created by Adobe back in the 80s and was extremely popular with literally tens of thousands of fonts being made in this format. Among the literally tens of thousands of fonts that were offered in Type 1 format, two of them, Helvetica and Times became very popular with web designers who liked the look and feel of these fonts over the standard Ariel and Times New Roman fonts that came with most Microsoft Windows based computers. The result was that many web designers started using these fonts on their site, which ordinarily is not a problem as all web browsers will support them …well that is until now, because IE9 will break if it tries to load certain type 1 fonts. So in short if a website owner tries to use either Helvetica, Times, or any other font for that matter, on his or her site and you have a Type 1 (Postscript) version of that font installed on your computer, there is a good chance you will not be able to visit that site. A more detailed explanation of this bug with available solutions follows below.
Symptoms
This bug will manifest itself as a seemingly random and inexplicable failure of Internet Explorer 9 to load, render or display certain websites. This bug is confounding because many websites will load perfectly fine while others seemingly at random will not.
The end user will see or experience the following behavior exhibited on certain websites:
· IE9 will go into compatibility mode, and then no content on a page will load at all resulting in a completely blank white page, or a random solid background color being displayed to the end user.
· IE9 will go into compatibility mode, and then only a small portion of a page's content will load.
· IE9 will go into compatibility mode, and then the entire website will appear to have loaded but no links or other interactive content will function. The Twitter.com homepage is a good example of this last behavior.
Cause
The cause of this bug is due to Internet Explorer 9’s inability to properly load and display certain Type 1 fonts. One possible reason why IE9 cannot handle type 1 fonts is because it uses a new font rendering technology that was released with Windows 7 called DirectWrite. DirectWrite for whatever reason does not support Adobe Type 1 fonts [1]. As a result any end-user who attempts to access any website which tries to load or use certain type 1 fonts the end-user has installed on their computer, including but not limited to Helvetica and Times, will exhibit the behavior outlined in the symptoms section of this article.
Here are some specific examples of CSS code that’s used by web designers, which could potentially cause a Type 1 font to be loaded:
body{font-family:Helvetica, Ariel, sans-serif;}
body{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
In the above two example you can see the website in question is trying to use a font called Helvetica and HelveticaNeue-Light respectively. If the end user had a Type 1 version of either of these fonts he or she would not be able to load the website which used the above code. That being said however if the end user had an OpenType or TrueType version of Helvetica installed instead of a Type 1 version of that font, then the website would have loaded perfectly fine, as this bug only seems to happen with Type 1 fonts.
Resolution
Best resolution for end-users and web developers/designers
The best fix for this problem would be a patch from Microsoft to allow Internet Explorer 9 to properly load and use Type 1 fonts. Unfortunately at the time this article was written Microsoft has already stated on their Microsoft Connect site that they have postponed fixing this bug, “We will consider fixing this issue in the future” is the extent of the detail they will give us [2]. I have included a screenshot of the Microsoft Connect site below for those who are interested.
 |
If you wish to visit the Microsoft Connect site pictured above you may do so here: https://connect.microsoft.com/IE/feedback/details/652843/postscript-typefaces-mess-up-ie9
Please be aware that you will need a Windows Live ID, with which you can join the MS Connect site, and you will need to have completed the Internet Explorer Feedback Participant Survey which is available on the MS Connect site.
|
Best available resolution for end-users (a.k.a. normal people)
The second best fix and the one I will currently recommend is to uninstall your Type 1 version of Helvetica, and if you are able to, replace it with an OpenType or TrueType version (Finding OpenType or TrueType versions of your fonts is up to you). If uninstalling Helvetica does not fix the problem for you proceed to uninstall the rest of your Type 1 fonts starting with Times.
Uninstalling Type 1 Fonts
Step 1 – Open Control Panel
Click “Start” then “Control Panel”
Step 2 – Open Appearance and Personalization
Click the “Appearance and Personalization” link in the Control Panel
Step 3 – Open Fonts
Click the “Fonts” Link
Step 4 – Change the display type of the folder to “details”
In the fonts folder click the view icon and select details from the drop down menu.
Step 5 – Add the sort value “Font Type” to the fonts folder
Right click in the white area in between the fonts and in the drop down menu that appears move your mouse over the “Sort By” option, then on the menu that slides out select the “More…” option.
In the dialogue box that opens up check the box next to where it says “Font type”
After “Font type” is checked and while it is selected click the “Move Up” button several times until “Font Type” appears just below the “Name” value then hit OK.
Step 6 – Uninstall Type 1 version of Helvetica, and if need be all Type 1 fonts
Click on the font named Helvetica that has the word Type 1 just to the right of it and then hit the “Delete” button at the top of the fonts folder. After this check IE9 to see if this has fixed your problem, if it has not continue to remove all of your Type 1 fonts.
Please be aware that some fonts may require you to boot into safe mode before you can delete them. If you get an error message stating the font is currently in use, then restart your computer, as soon as your computer starts re-booting press and hold the F8 key, until you see a boot menu appear then select boot in safe mode. Once windows loads in safe mode navigate to the fonts folder by clicking “Start” then “Computer” then “C:” then “Windows” then “Fonts”, after the font folder is open follow steps 4 through 6 above.
Best available resolution for web developers/designers
Option 1 - Don't use Helvetica or other non-standard fonts in your CSS
The first option is if you do not need to, or do not want to use non-standard fonts, then edit your site's CSS file(s), and delete all references to non-standard fonts, especially Helvetica. Don't forget to edit any inline CSS declarations you may have as well. I have listed the standard fonts below for readers general reference, these are the fonts you should use, delete any fonts NOT listed below from your site's CSS code.- Arial
- Arial Black
- Times New Roman
- Veranda
- Geneva
- Georgia
- Courier New
- Tahoma
- Trebuchet MS
- Palatino Linotype
- Book Antiqua
- Lucida Sands Unicode
- Lucida Console
- Comic Sans MS
Option 2 - Use a substitute web font with the CSS @font-face feature to serve up your desired fonts
One really nice feature of CSS2 and CSS3 is the ability to have your website serve any font directly to the end-user. The font is stored on your web server and sent to a temporary cache on the end-user's machine upon request of your website. This enables the end-user to see your website with the fonts you have selected, and the font type for web fonts is generally TrueType or OpenType, which IE9 has no problem rendering. Please be aware that Helvetica's owners (Mergenthaler Linotype Company) do NOT currently allow the Helvetica font to be used as a web font with the CSS @font-face feature, so you will not be able to use this method if you want to use Helvetica. A great place to get fonts that you can legally use on all websites using the @font-face feature is Font Squirrel, they offer a large number of royalty free web fonts.Option 3 - Use an online web fonts service like webfonts.fonts.com
There are several font services out there that will allow you to use many proprietary fonts, for a small fee, usually based on the number of hits your site receives. I have listed a few of these web font providers below.Option 4 (Least Desirable) - Use Conditional Comments to create IE9 specific stylesheets.
For those unfamiliar with conditional comments, they are essentially just like normal comments except that all versions of IE, with the exception of IE10+[3], will actually read them and execute a conditional statement contained within the comment. I have provided an example below of two conditional comments which will load two separate stylesheets based on whether or not the browser in use is IE9 or not.<!--[if !IE 9]><!-->
<link rel="stylesheet" type="text/css" href="not-ie9.css" />
<!--<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
In the above example you would place all of your Helvetica font family references in the css file called "not-ie9.css", as this is the css file that will be loaded if the browser is not IE9. In the css file called "ie9.css" you would use a substitute font for Helvetica, like Arial in your css font-family declarations. I have provided examples below of what code would be in each css file, if you wanted to continue using the Helvetica font as well as other type 1 fonts.
not-ie9.css
body{font-family:Helvetica, Arial, sans-serif;}
ie9.css
body{font-family:Arial, sans-serif;}
References
- DirectWrite Questions and Answers - WPF Text Blog - MSDN Blogs Blogs.msdn.com. 2009-04-13. Retrieved 2012-03-09.
- Postscript Typefaces mess up IE9 - Internet Explorer Feedback Program - Microsoft Connect connect.microsoft.com 2011-03-22. Retrieved 2011-12-15.
- HTML5 Parsing in IE10 - IEBlog - MSDN Blogs Blogs.msdn.com. 2011-07-6. Retrieved 2012-03-15.
- Problems with my IE9 browser when using some websites - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-06-08. Retrieved 2012-03-20.
- Internet Explorer 9 won't display some websites correctly, even with compatibility view. - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-03-15. Retrieved 2012-03-20.
- IE9 Problem - it does not display popular websites like hulu.com or engadget - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-03-19. Retrieved 2012-03-20.
- Why does IE9 fail to load some websites? - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-01-26. Retrieved 2012-03-20.
- I can't view Twitter.com, Cnet.com or ESPN.com properly, can you? - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-05-10. Retrieved 2012-03-20.
- IE 9 cannot render Type 1 font - Internet Explorer Web Development - Internet Explorer Development Forums - Internet Explorer Developer Center social.msdn.microsoft.com. 2011-06-04. Retrieved 2012-03-20.
