Add HTML5 and Web Fonts support for Internet Explorer 8

Internet Explorer has long been bothering Web developers with its bugs and inconsistencies with modern standards.

Although many bugs are fixed in IE9, it’s still not as popular as IE8. I’m even afraid to talk about IE7.

The essence of the post is that IE8 can still be made to comply with modern Web technologies. In our case, these are HTML5 tags.

')

HTML5 Elements

HTML5 has a whole new set of elements, for example, a header to separate the site header and a footer to separate the basement.

Since IE8 knows nothing about them, it will not recognize their styles from CSS. Fortunately, there is an easy way - just add the missing elements to the DOM 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]--> 

Another problem is that HTML5 elements are rendered as a block by default, but IE8 does not know that either. To overcome this problem, just add to CSS:

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

Web fonts

Web fonts already have a decent time used by developers and even have a few large resources with which you can connect them: Google fonts , Type Kit , Font Squirrel . In addition to text, web fonts can be very useful for social icons or icons. networks .

To use web fonts, you need to add @ font-face rule in CSS:

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

In this example, I started a new “font family” and called it “My Font”, also indicated the location of the font in relation to the css-file. This will allow the use of this font when describing styles.

IE8 still does not always handle pod designs and displays the system font instead of the intended one.

To avoid this, you can use several types of files with fonts. Browsers support the following types of files with fonts:

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

Of all those listed, WOFF is now becoming the standard. It is supported by many browsers (Chrome, Firefox (above 3.6), Opera, Safari and IE9).

Of course, IE8 knows nothing about WOFF and only supports EOT. So in order to use the web font that we want to show to IE8 users as well as in other browsers, we need files in the WOFF and EOT formats.

Well, here everything is not in order, IE8 has an error that prevents the loading of several formats of the same font. Fortunately, there is a hack that fixes it.

Font Spring guys came to the rescue (link above):

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

In this example, the font is called MyWebFont and is presented in several formats at once (EOT, WOFF, TTF and SVG).

* SVG is used just in case the user uses mobile Safari (iPhone / iPad) up to version 4.1

Well, for full use of the font, you need to describe all types. For example, I use only 4:

• 300, normal
• 300, italic
• 600, normal
• 600, italic

Well, or you can describe them like this:

 @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-LightItalic-webfont.eot'); src: url('fonts/MyWebFont-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-LightItalic-webfont.woff') format('woff'), url('fonts/MyWebFont-LightItalic-webfont.ttf') format('truetype'), url('fonts/MyWebFont-LightItalic-webfont.svg#MyWebFontLightItalic') format('svg'); font-weight: 300; font-style: italic; } @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-Bold-webfont.eot'); src: url('fonts/MyWebFont-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-Bold-webfont.woff') format('woff'), url('fonts/MyWebFont-Bold-webfont.ttf') format('truetype'), url('fonts/MyWebFont-Bold-webfont.svg#MyWebFontBold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-BoldItalic-webfont.eot'); src: url('fonts/MyWebFont-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-BoldItalic-webfont.woff') format('woff'), url('fonts/MyWebFont-BoldItalic-webfont.ttf') format('truetype'), url('fonts/MyWebFont-BoldItalic-webfont.svg#MyWebFontBoldItalic') format('svg'); font-weight: 600; font-style: italic; } 

And finally, look at the service where you can generate a font in all formats of web fonts.

PS The comments indicate that the solution also works for earlier versions of IE.