How to Get IE8 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 IE9, 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 IE7 (I don’t), IE8 is popular enough to demand attention.

The good news is that it’s possible to get IE8 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 IE8 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 IE8 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, IE8’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)

Hack Stress Medical expert from a renowned wellness center of California says that unica-web.com buy cheap cialis stress is a silent killer worst than a heart disease & cancer. Sites like tinder levitra purchase canada or matchmaking are in demand and it seems virtual world is more important than the virtual world. unica-web.com cialis 5 mg The science has not remained stand still. It contains herbs rich unica-web.com cheap viagra price in antioxidants that reduce the production of nitric oxide (NO) in body.
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
• How To Use HTML5 Data-* Attributes with JQuery and Selenium
• Multiple Uses of CSS Classes
• How to Use WordPress Custom Post Types to Add Events to Your Site
• How To Navigate JSON Trees in Postgres using Recursive CTEs

• development
• howTo
• html5
• IE
• webFonts

Did you love / hate / were unmoved by this post?
Then show your support / disgust / indifference by following me on Twitter!