Arial Black displaying in Italic IE / WebKit SP3 - Specialmoves

Arial Black displaying 
in Italic IE / WebKit SP3

Specialmoves Labs

Written by Ciaran Park,

Recently whilst working on a rather large client project we came across an annoying bug. The project originally used a custom font which we advised against due to licensing, instead we decided to use Arial Black. If you’re intending on using Arial Black in your font stack, or as your main font it is worth checking with the client or the creative whether this is imperative.

Cause

Apparently when Microsoft released Service Pack 3, the Arial Italic font in the Arial Black font family was mis-named, so therefore corrupting the font. It’s unclear how some machines have the corrupt font and others don’t, but suffice to say no machines here @specialmoves had the corrupt font when testing, but a client had more than 3 people who were experiencing the font issue (fonts were located on individual machines – they were not network shared). The issue seems to be with v2.40 Arial Black (latest release), it causes all copy to appear as the italic version of Arial, very annoying. The issue also occurs on WebKit based browsers as well as IE, even though there doesn’t seem to be much online documentation of this.

Solution

Deleting the font, then re-installing an older version (v2.35 is reported to work) will fix the issue, however this clearly doesn’t cover public users. Hosting the font is also a possibility using one of various methods such as font-face, Google Font API, Sifr or Cufon.We decided on creating the declaration below for all the offending copy

div { font-weight:800; }

Or to target WebKit based browsers you can use the code below which is perfectly valid CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
   font-weight: 800;
}

This seems to work well. Let us know if you experience any issues or know of any other solutions. For more info google “Arial Black, Italic, SP3, IE"