I have had this problem on Windows 7 pretty much since the day I installed it.  Ugly Arial Italics fonts showing up all over the place, particularly on various websites.

Now, you may be familiar with the Chrome / Firefox browser issue with ugly arial italics fonts, and this started with that particular issue.  Which is relatively easy to fix by simply installing the Unicode Arial font available from Microsoft: https://www.microsoft.com/en-us/download/details.aspx?id=16083

That solved 99% of the problem, but there were still places where that ugly bold italics font kept showing up!  All over Yahoo, various random news websites, and – of course – Facebook:

uglyitalics

See the text in the Search box?  The “1” on the notifications icon?  The “Home” and “Find Friends” links?  Facebook was actually one of the better ones in that only controls looked that way, the text in the Feed and on your Wall looked fine.  Some other sites, though, showed EVERYTHING in that ugly font.  Oh, and this is with “ClearType” and Font Smoothing enabled.  So not only is it showing the wrong font, it’s showing it badly.

The Cause

The cause is that these websites are setting “Helvetica Neue” in their stylesheets.  It would typically look something like this:

1
2
3
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

While “Helvetica” and it’s younger relative “Helvetica Neue” ship with Apple’s operating systems, and many designers work on Macs where these fonts are always available, the fact is the “Helvetica” font is the most popular (I’d argue “over-used” and “lazy”) font choice in the design industry.  The problem with that is neither of these fonts ship with any other operating systems!  On Windows systems Microsoft chose to include the visually similar “Arial” font family instead of “Helvetica.”  Most Windows users are not going to shell out $60 to Linotype for the two Helvetica fonts.  Which means the odds are neither of those fonts is usually installed on Windows machines (and probably also not on Linux or Android devices either).

783px-Helvetica_Neue_typeface_weights.svg

But it shouldn’t be a problem if the font isn’t installed, right?  That CSS above is supposed to take that into account by going down the line – first it looks for “Helvetica Neue” and when it doesn’t find it then it looks for “Helvetica” and when that’s not there it goes to “Arial” – which is most likely present, but if it it isn’t then it will just use whatever the generic “sans-serif” font is.  Seems pretty self-explanatory.  So why does it fail?

Well, have you ever asked yourself HOW it goes down the line looking for fonts?  It isn’t necessarily the straight question of whether or not the font is installed or not.  The browser doesn’t make that determination, it asks the operating system.  And the Windows operating system has it’s OWN table of font substitutions!  That table is already set up to substitute “Arial” if “Helvetica” isn’t installed, meaning that CSS query never gets to the “Arial” in it’s list – Windows automatically sends the browser “Arial” in place of “Helvetica.”

But what does it do for “Helvetica Neue?”  Well Helvetica Neue is NOT Helvetica!  They are different font families with similar names, that’s all.  And “Helvetica Neue” is NOT in the Windows font substitution list.

You’d think that would mean it would just go to the next font in the CSS (which is “Helvetica”) which IS in the list and set to substitute “Arial” by default.  And maybe it is (sort of) doing that, because the resulting font on screen IS “Arial” – but I’ve no idea why it’s a jaggy, ugly, bold italics version  of it.

The Solution

You’re going to be editing the Windows Registry, which is always risky because if you screw up you can potentially hose your system.  But you’re smart enough to follow step-by-step instructions, right?  Ok, so let’s do this thing!

  1. Go to Start > Search and type “regedit” (without the quotes)
  2. If a box pops up asking for Administrator confirmation OK it (if you aren’t the admin you need to have them do this)
  3. Open up the Registry keys to:

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes]

  4. Right+Click on the right pane of the editor and select “Add String”
  5. In the little box type “Helvetica Neue” (no quotes)
  6. Now Right+Click on that new entry and select “Modify”
  7. In the “Value” box type “Arial” (no quotes)
  8. Restart your computer.

When it’s rebooted the problem should be gone!