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:

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:

You may also like:

tagged with:

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

This post got 40 comments so far. Care to add yours?

  1. Nick says:

    Love this blog but I’m still having trouble getting IE8 to play nice with a website I created with dreamweaver and html5. Can you email me?

  2. [...] original disponível em http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/ Publicado em Sem categoria por vinicius. Marque Link [...]

  3. TE says:

    Exactly(!) what I needed, thanks so much!

  4. [...] It is high time to use HTML5 and use it properly. The only problem from my point of view is the lack of support in Internet Explorer 8, which is the oldest browser I feel the need to support. I have solved that problem by using this technique from Alex Tatiyants. [...]

  5. Nick Yeoman says:

    Hey, thanks for the reference! Great work!

  6. James says:

    Thanks Alex – saved my bacon.

  7. Ben Johns says:

    Thanks Alex I really appreciate this !!

  8. Barbra says:

    I appreciate, cause I found exactly what I used to be taking a look for.
    You have ended my 4 day lengthy hunt! God Bless you man.

    Have a great day. Bye

  9. saravanan says:

    Happy!!! Perfectly working, thank very much Alex Tatiyants….

  10. Hi Alex,

    I´m working on a very complex and urgent project when before the deploy I check Google Analytics and I saw that a considerable amount of users are using IE 8 witch I did not consider to support. So When I finish the whole site I realized that all my templates was broken in IE8. When I found your tip for condicional comments document.createElement(‘header’);document.createElement(‘nav’);document.createElement(‘nav’)… and header, nav, section, article, aside, footer { display:block;} BANG! All my templates are working like magic instantly!

    Thank you, Thank you, Thank you, Thank you,Thank you, Thank you,Thank you, Thank you,Thank you, Thank you, ….. 1.000 times.

    You made my day!

    If I can help you, don´t hesitate to contact me.

    Greeting from Brazil!

  11. Raghavendra says:

    Hi Alex,

    I liked your Blog.

    This is the first time i am posting something on someones blog.

    Could you please let me know if “eot?#iefix” font is complusory to fix IE8 issue? “eot” font itself will not do this job?

    I am little confused., please help me.

    Thanks in Advance,
    Raghavendra V

  12. dorian grey says:

    oooh man thx a lot,u saved my ass!!!

  13. Terry Smith says:

    Good clear explanation and even better.. It works. Thanks for posting this.

  14. Bal kishan says:

    Hi Team,

    thanks it is very nice. and helpful to me.

    Could u tell me these tag support in IE8 also?

  15. omniafausta says:

    yes, this really saved me a lot of trouble on the html5 issue!!
    Now I am gonna look if I can get the webfonts to play nicely as well :)

    THANKS for posting this

  16. Atish says:

    Thank you sir! I was searching many blogs for this solution. Any solution on IE7?

  17. S. B. Alam says:

    Hy Alex,

    Now I can say some people are there in the world who makes things better

    Thank You so much

    Alam, India

  18. Tom says:

    Hi there,

    I’m using IE9 with Browser Mode and Document Mode set to IE8, but this solution doesn’t work for me :(. IE8 is still ignoring styles that I apply to the tag. Am I missing something here?

    Thanks,
    Tom

  19. Mike says:

    This article was a life saver

    I hate ie8 a little less now

  20. Mathieu says:

    the creating of the elements helped me a-out big time, thanks a lot! – IE8 hater

  21. Matt Porter says:

    I have been using the same font stack as detailed in the post (font squirrel now gens using the same stack markup) but still cannot get the fonts to render in IE8 and below.

  22. Ines says:

    Big thanks for this blog!!! It saved me from going …khm khm…nevermind :)

  23. Brian says:

    It’s amazing that this works. How does document.createElement(‘section’); actually make IE understand HTML5 tags? I mean, it doesn’t know what a “section” actually is so how does it treat it any differently? We didn’t give “section” a meaning. I know it works because on a site that had trouble rendering properly in IE8 vs Firefox 24 (which rendered properly), the site now looks the same on both browsers. It’s just amazing how this works. Care to explain?

    • Alex Tatiyants says:

      My (possibly flawed) understanding of how this works is this: in order to apply a style to a tag, IE’s parser needs to be aware of it. Calling document.createElement(tagName) forces IE to become aware of the tag. Exactly how (or why) IE does this internally isn’t something I can comment on.

  24. Simon says:

    Hey, thanks for posting! Very useful tips – I used the IE8 HTML semantic tags trick…works a treat! :)

  25. Bhushan says:

    I appreciate, Awesome idea

    THANKS for posting this

  26. […] IE8 Web Font Support            Can I Use SVG Fonts? […]

  27. Matt says:

    I really wanted to say THANK YOU! You’ve just saved me a few days of battling with IE8, my site now works and looks like it should.

    Happy days are here again :D

  28. luzz says:

    Is there a website(or cheatsheet) containing a list of all elements html5/css3 supported by ie8+?

Leave a Reply