How to Get Internet Explorer 8 to Support HTML5 Tags and Web Fonts

Internet Explorer has long been the bane of web developer’s existence, largely due to its limited and buggy support for standards.

Though things improved some in Internet Explorer 9, it doesn’t yet have the market share that would allow you to ignore its older siblings. And while it’s debatable whether you need to worry about Internet Explorer 7 (I don’t), Internet Explorer 8 is popular enough to demand attention.

The good news is that it’s possible to get Internet Explorer 8 to do decent things with modern web technologies. In this post, I’ll focus on two: HTML5 tags and Web Fonts.

HTML5 Elements

HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. For instance, nav signifies a navigational menu.

Since Internet Explorer 8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Fortunately, there is an easy way to fix this by simply appending missing elements to the DOM of the page:

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

Obviously, you don’t have to define every HTML5 element in existence, just the ones you actually use. By the way, this code uses conditional comments, a feature introduced by Microsoft to specifically support differences in browser versions.

Another important thing to point out is that HTML5 elements are displayed as block by default, but Internet Explorer 8 doesn’t know that either. To mitigate this issue, you could either specify display: block; when styling specific elements or do it wholesale in your CSS:

header, nav, section, article, aside, footer {
   display:block;
}

Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you.

Web Fonts

Web fonts have been around for a while and there are some great resources online to get them: Google fonts, Type Kit, Font Squirrel, etc. Aside from giving you more options for your text, web fonts can be very useful for icons, social media links, and so on.

To use web fonts, you can leverage CSS’s @font-face rule:

@font-face {
    font-family: 'My Font';
    src: url('fonts/Myfont.eot');
}

h1 {
    font-family: 'My Font';
}

In this example, I’ve defined a new font-family called “My Font”, let the browser know where to find the file which describes the font format, and actually styled a header element using the newly defined font-family.

Now, Internet Explorer 8's relationship with web fonts is a bit more complex than “it doesn’t support it”. It does actually support them, but in a way that makes using them a pain.

There are five types of web font formats:

• Embedded Open Type (EOT)
• TrueType (TTF)
• OpenType (OTF)
• Scalable Vector Graphics (SVG)
• Web Open Font Format (WOFF)

Of the bunch, WOFF is going to become the standard. It’s supported by Chrome, Firefox (since 3.6), Opera, Safari, and IE9.

Of course, IE8 knows nothing about WOFF and instead exclusively supports EOT (to be fair, this is largely because IE8 preceded WOFF). This means that to use a web font which can be displayed in both IE8 and other browsers, you have to supply EOT and WOFF formats.

To make matters worse, IE8 has a bug which prevents it from loading more than one format for the same font. Fortunately, there is a hack you can use.

Anyway, here’s the cross-browser CSS for @font-face, courtesy of super-clever guys at Font Spring:

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

In this example, I’m using a font called Open Sans and its multiple formats (EOT, WOFF, TTF, and SVG) which are stored in the “fonts” folder on my site.

* If you’re wondering why I included the SVG format, the answer is because mobile Safari (iPhone/iPad) supported only this format until version 4.1.

By the way, it’s important to realize that if you use @font-face, you’ll need to provide font versions for all style / weight combinations you plan to use. For instance, I’m using font weights of 300 (normal) and 600 (bold), as well as font styles of normal and italic. This means that I need to provide 4 different font faces:

1. 300, normal
2. 3oo, italic
3. 600, normal
4. 600, italic

Here’s the code for the rest:

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
}

Finally, you may not always have access to all the various font formats for a font you want to use. If that’s the case, Font Squirrel has a great tool to generate them automatically. Just upload the format you have, and it will give you a zip file with all the formats you need.

References

• http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8
• http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

You May Also Like

• How to Debug in IE on a Mac
• Leaving Solution Land
• Things I Wish I Knew as a Comp Sci Student
• Good Devs Don’t Like Magic
• Creating a WordPress Theme