Nice web type in Internet Explorer 7 and 8

Posted in: Design, Development

Recently we revamped our myriad font stacks (pun intended) to a single one utilising a single web font. The font chosen (Raleway) was available in a number of different weights, affording us the flexibility of presentation that we had previously relied on several different typefaces to achieve. Unfortunately, we soon discovered a feature of older versions of Internet Explorer than meant - when presented with a number of different font weights - it arbitrarily assigned one to everything and ran with it. Stylesheet bedamned. Phil, our dev manager, couldn't let this stand and quickly identified and created a workaround to the problem. I'll let him explain:

In essence, to enable smoother (and correct) implementation of font weights in IE, you need to specify and load each weight individually, ideally in the document and before the stylesheet that applies them. Here's the code we used:

<!--[if lte IE 8]>
        <link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
        <link href="//fonts.googleapis.com/css?family=Raleway:400" rel="stylesheet" type="text/css">
        <link href="//fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet" type="text/css">
        <link href="//fonts.googleapis.com/css?family=Raleway:800" rel="stylesheet" type="text/css">
        <link href="//fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet" type="text/css">
<![endif]-->

The result is we can now deliver smoothly rendered and correctly weighted fonts for everyone using Internet Explorer (7 and upwards), and given that a significant section of our site visitors run Windows—and have a version of IE installed—this is a very good thing.

Posted in: Design, Development