Proxima Nova TypeKit Font Showing Italic in IE6 – IE8

December 16th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

We’ve been using Adobe TypeKit fonts on a few sites recently to enhance the look and feel of the design. As one of these sites neared completion we performed the standard cross-browser testing, and found that one of the fonts we’d used, Proxima Nova, wasn’t appearing quite right in older versions of Internet Explorer.

In versions of Internet Explorer pre version 9, the font itself was appearing ok, but for some reason it was appearing as italic throughout. My first test to try and resolve this was to try and set the ‘font-style‘ CSS property of everything to ‘normal‘ like so:

* {
    font-style: normal;

This didn’t work however and the font still appeared as italic. It was time to do what every good developer does in times of need… Google.

Results pertaining to this problem were sparse to say the least, however I did eventually come across this blog post on the TypeKit blog about this very problem:

If you don’t want to read the whole thing, I quote below the main part explaining the cause:

Unfortunately, not all browsers conform to the specification when it comes to @font-face. In particular, IE 6-8 have some bugs that limit the usefulness of linking multiple fonts into a single family. The biggest bug prevents us from linking more than four weights and styles into a family in all three browsers. Other bugs that only affect IE8 are triggered by families when more than one weight and style is linked. In these cases, we must give up some of the convenience of linking multiple weights and styles for the sake of compatibility.

That certainly sounds like it could be the cause why the font is showing as Italic. Fortunately, the blog post also goes onto the discuss how they’ve overcome this problem by adding individual font families for each weight and style.

In my case I wanted just a normal, non-italic version of Proxima Nova and therefore was able to update my CSS as follows wherever I wanted to include the font:

font-family: proxima-nova-n4, proxima-nova, sans-serif;

The blog post mentioned above does have a table containing these individual font family references so check it out if you’re looking for a version of the font in a different weight or style.

This entry was posted on Monday, December 16th, 2013 at 1:08 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first