Thursday, December 15, 2011

Internet Explorer 9 Type 1 Font Bug, Helvetica IE9 Bug

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


The best available resolution for web developers/designers, is one of four things.

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

  1. DirectWrite Questions and Answers - WPF Text Blog - MSDN Blogs Blogs.msdn.com. 2009-04-13. Retrieved 2012-03-09.

  2. Postscript Typefaces mess up IE9 - Internet Explorer Feedback Program - Microsoft Connect connect.microsoft.com 2011-03-22. Retrieved 2011-12-15.

  3. HTML5 Parsing in IE10 - IEBlog - MSDN Blogs Blogs.msdn.com. 2011-07-6. Retrieved 2012-03-15.

  4. Problems with my IE9 browser when using some websites - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-06-08. Retrieved 2012-03-20.

  5. 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.

  6. 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.

  7. Why does IE9 fail to load some websites? - Internet Explorer 9 - Microsoft Answers answers.microsoft.com. 2011-01-26. Retrieved 2012-03-20.

  8. 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.

  9. 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.

12 comments:

  1. I have no Type 1 Fonts installed yet my new Twitter account set up by a friend displays like this.

    I am using IE9 and Windows Vista

    http://i157.photobucket.com/albums/t69/ceetaji/Twitter%20Failure/TwitterFail.jpg

    Can anyone help please?

    ReplyDelete
    Replies
    1. My advice would be to try resetting internet explorer's settings, click Tools > Internet Options, then click the Advanced Tab and click the button that says "Reset..."

      If this doesn't work you may want to try disabling Accelerated Graphics ...in the same advanced tab area as mentioned above check the very first box labeled "Use software rendering instead of GPU rendering*"

      Delete
    2. I've just identified this as the problem vexing me in a site created with Twitter Bootstrap. The site displayed fine in all other browsers, so I sifted through several thousand lines of CSS before identifying the line that broke IE9. I don't know for certain if it's the theme I'm using or the Bootstrap default, but the offending line set the font-family property in the body tag like this:

      body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      ...
      }

      After reading this article (THANK YOU, Bobby!), I changed it to this:

      body {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      ...
      }

      FWIW, this was line #1085 in bootstrap.css in my case. Your mileage may vary. I hope this further explanation helps other Bootstrap users. It's a shame Microsoft hasn't addressed this issue by forcing IE9 to skip the old Postscript fonts and go down the line to the next font specified in the font-family cascade (defaulting to sans-serif at a minimum).

      Delete
  2. Just installed a new workstation in my studio with windows 7 and ie9. Have been using XP up till now with various versions of ie (6 - 8). Had al the usual problems coding websites css for the ie's but with ie9 certain websites would not load. Drove me crazy until I read this page. Deleted helvetica family and it works like new money.

    I had to rename the helvetica file to another name to delete it (right click -> properties and just type a different name in the first screen.

    now all sites load properly.

    thanks for the tip

    jeff

    ReplyDelete
  3. Im having this probelm but i don't have helvetica in my PC, i've checked. Anything other font that is causing this? I looked in my font folder and everything is either opentype or raster.

    ReplyDelete
  4. i dont have helvetica or any type 1 what now can i try

    ReplyDelete
  5. Thanks, I've had this problem for 12 months or more & just got used to switching to ther browsers when I hit a 'black' site. Your fix has worked reliably on 2 PCs so far. MUCH appreciated.

    ReplyDelete
  6. Just fixed my wordpress site by editing css and also some on page headline stuff with your advice. It snapped right into place after removing the font... thanks a ton.

    ReplyDelete
  7. I have just downloaded IE9 and all webpages seem to load fine but the default font has changed on the Google search page and all web pages to a thick, black one. How can I change the default font? I have deleted all Type 1 fonts just in case that would work. But it didn't.

    ReplyDelete
    Replies
    1. My advice would be to try resetting internet explorer's settings, click Tools (Gear Icon) > Internet Options, then click the Advanced Tab and click the button that says "Reset..."

      Also make sure IE is not zoomed in, click Tools (Gear Icon) > Zoom and make sure it is set to 100%.

      Delete
  8. Many thanks Bobby for your enlightening article. - I have had months of frustration trying to work out why sites such as bbc.co.uk or slingbox.com would not load for me with IE9 and IE10.

    What a disgrace that Microsoft think they can push their TrueType and OpenType technology and leave the Type-1-Font users by the wayside. - I myself invested a considerable amount in Type-1-Fonts and don't intend to give up using them. Since Adobe etc. won't offer an upgrade to OpenType and basically expect you to pay twice for the same font I shall convert my Type-Ones to OpenType using FontLab Studio when absolutely necessary. Until then, IE and Adobe can get stuffed.
    Seth Dawson.

    ReplyDelete
  9. Hi Bobby,

    There is another factor that can cause this behavior in IE9 in pages with classic framesets. It took me a lot of hair-tearing to find it but I finally narrowed it down: If you set an attribute of overflow:hidden for the html node in the frameset page everything will display blank in IE9 unless you activate compatibility mode. It works fine in IE8, IE10 and IE11. It is only IE9 that has this problem.

    ReplyDelete