14

I installed some new Helvetica variations the other day and since then Helvetica Neue isn't rendering how it should (in Chrome or Firefox).

I tried deleting all the Helvetica fonts and installing them again but they're still not rendering properly.

This is what it looks like:

enter image description here

Some letters appear to be taller than others?

The font should be: normal 14px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;

2
  • 1
    What's the operating system?
    – and31415
    Feb 24, 2014 at 15:07
  • @and31415 I guess it is a common issue on windows and mac.
    – Omar
    Feb 24, 2014 at 15:27

4 Answers 4

13
+25

I assume you are running on Windows, since Mac users have no need to install Helvetica Neue.

This font does not normally exist on Windows and is replaced by Arial. Installing any flavor of Helvetica is somewhat tricky, since it is rather commonly used in CSS style-sheets, so can be picked up by the browser even in cases where Arial is better, to mess-up font rendering in the browser.

There are several implementations/flavors of the Helvetica Neue font. Some excel at large font-sizes but give poor results for normal sizes. I have heard that this one gives good results, but have not used it personally.

Chrome allows you to provide your own custom CSS changes that overrides the website CSS. To find the custom CSS file, close Chrome and go to the folder :

%AppData%\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

and open the file Custom.css in your favourite text editor.

To use Arial instead of Helvetica, paste-in the following lines:

@font-face { font-family: 'helvetica neue'; src: local('Arial'); }
@font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
@font-face { font-family: 'helvetica'; src: local('Arial'); }
@font-face { font-family: 'helvetica'; font-weight:bold; src: local('Arial'); }
@font-face { font-family: 'HelveticaNeue-Light'; src: local('Arial'); }
@font-face { font-family: 'Helvetica Neue Light'; src: local('Arial'); }

You could also use the Chrome extension Change Font Family Style to force using Arial instead of Helvetica.

EDIT

It has been noted that user stylesheet (Custom.css) support has been removed from Chrome since November 2013, which explains why the usual solution doesn't work any more.

Your remaining options as I see them are :

  1. Use the extension Change Font Family Style.
  2. Totally delete Helvetica from Windows so to force Chrome to use Arial
  3. Change to another browser.

To completely delete Helvetica, do the following :

  1. Go to Start > Control Panel > Fonts, select the fonts, then on the File menu click Delete (source).
  2. Delete the fonts cache file C:\Users\[username]\AppData\Local\GDIPFONTCACHEV1.DAT and reboot.
  3. Only if required, search the registry for "helvetica" and delete (very carefully), then reboot.
12
  • Thank you for your input. Bounty's reason "The current answer(s) are out-of-date and require revision given recent changes". I actually was using the solution you have provided, but after Chrome's latest update, they stopped working.
    – Omar
    Feb 25, 2014 at 13:11
  • 1
    Have you tried uninstalling Helvetica and letting Chrome default back to Arial? You might also try the extension.
    – harrymc
    Feb 25, 2014 at 13:30
  • I have restored default fonts, yet no dice. I prefer not to use extensions.
    – Omar
    Feb 25, 2014 at 13:38
  • Even if you have deleted the fonts, they might still exist in the fonts cache. To empty it, delete the file C:\Users\[username]\AppData\Local\GDIPFONTCACHEV1.DAT and reboot.
    – harrymc
    Feb 25, 2014 at 13:46
  • 2
    The solution stopped working because user stylesheet (Custom.css) support has been removed from Chrome. Mar 1, 2014 at 1:38
2

So I had this issue today and stumbled on answer to a similar question on quora. This fixed it for me faster:

  1. Install the extension Force Custom Fonts
  2. Go to the extension settings in chrome://extensions
  3. Next to the Substitute Fonts menu, click the + icon to add a substitute font.
  4. Select Helvetica Neue using the drop down in the first box and Arial in the second drop down next to it.
  5. Save your preferences, refresh any pages that had the issue, profit!
0

Solution is to install all (or almost all) Helvetica Neue styles. If you have just some in you "Helvetica Neue" subfolder, your Browser will pick these, in my case it was only the Super Slim variante. DL on cdnfonts.com the helvetica-neue-55.font and you are good to go. it's not the browser's fault, it's due to incomplete font packs.

0

I had the same problem, I managed to fix it and here's how:

  1. Close All Apps
  2. Open Control Panel\Appearance and Personalization\Fonts, Delete The Helvetica font and delete all fonts of helvetica neue, skip if it says "Font in use"
  3. Open Regedit, Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes and delete "helvetica"
  4. Restart your computer
  5. Now delete all fonts of helvetica neue that said "Font in use" earlier in Control Panel\Appearance and Personalization\Fonts That's it!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .