Click here to Skip to main content
15,125,890 members
Articles / Web Development / HTML
Technical Blog
Posted 15 Apr 2012

Tagged as

Stats

71.4K views
4 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
15 Apr 2012CPOL4 min read
Though support for modern standards is limited in IE8, it's not impossible. Here's how to add support for HTML5 elements 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:

HTML
<!--[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:

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:

CSS
@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:

CSS
@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:

CSS
@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

This article was originally posted at http://tatiyants.com?p=1876

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AlexTatiyants
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pin
VMAtm9-Jun-12 1:27
MemberVMAtm9-Jun-12 1:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.