Macos – Helvetica Neue font error – boxed characters on Google Chrome for Mac

fontsgoogle-chromemacos

I'm experiencing a font issue with Helvetica Neue using Google Chrome Version 23.0.1271.101 on my Mac with OS X Lion 10.7.5

Characters are displayed within boxes.

Prolific on Stack Exchange sites such as Stack Overflow this appears in the user profile areas like Accounts:

Question and Answer sorting:

Expanded usercards:

Loading the same pages in Safari has no issue – the fonts appear normal as expected.

In Chrome, if I load Developer Tools and change the elements font-family the page renders correctly.

CSS specifying Helvetica Neue

body { font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif; }

CSS without Helvetica Neue

body { font-family: Helvetica,Arial,Sans-serif; }

To assure standard Mac fonts, in Font Book I selected File » Restore Standard Fonts… which did not solve the issue. There are no reported font conflicts in Font Book.

My system has Helvetica Neue installed:

Researching, I found a similar question here of Helvetica font only corrupted in Chrome on OS X; however, no solution.

How can I resolve Helvetica Neue font rendering issues with Google Chrome browser?

Best Answer

I've seen that happen before to a workmate. Removing the font and re-installing solved the issue. If you need assistance removing fonts from OSX and reinstalling follow this link

EDIT:

To clear the current user’s font cache, first quit all running applications (otherwise, you may see font oddities after using the command), then open Terminal (in Applications -> Utilities) and run this command:

atsutil databases -removeUser

If you want to remove the font cache for all users, use this command, and provide your admin password when asked:

sudo atsutil databases -remove

Once you’ve cleared the caches, you should stop and restart the ATS server with these commands:

$ atsutil server -shutdown

$ atsutil server -ping

It will take a second or two for the server to restart, but when it does, you should be good to go. If anything still looks odd, a logout and login should take care of any lingering issues.

credit: http://www.macworld.com/article/1139383/fontcacheclear.html

Related Solutions

Google-chrome – Text renders awfully in Chrome on a PC, yet fine in all other modern web browsers

This was a problem worthy of StackOverflow after all. CSS Solution:

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;

Google-chrome – Why isn’t Helvetica Neue rendering properly

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 :

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

To completely delete Helvetica, do the following :

Go to Start > Control Panel > Fonts, select the fonts, then on the File menu click Delete (source).
Delete the fonts cache file C:\Users\[username]\AppData\Local\GDIPFONTCACHEV1.DAT and reboot.
Only if required, search the registry for "helvetica" and delete (very carefully), then reboot.

Best Answer

Related Solutions

Google-chrome – Text renders awfully in Chrome on a PC, yet fine in all other modern web browsers

Google-chrome – Why isn’t Helvetica Neue rendering properly

Related Question