Google Chrome, Helvetica Neue and strange characters bug

helve

Helvetica Neue is a really nice, clear font that’s widely used by designers and is now quite frequently used on webpages.  However, it’s not a standard font on Windows and isn’t a “web-safe” font (which means you can assume it’ll be installed on most peoples computers.  For that reason, web developers generally provide an alternative fail-over for users who don’t have it installed.

However, I do and due to the way that Google Chrome displays it, I’ve had to put up with web pages looking like this:

sniff1

You can see that various characters have been replaced by strange foreign symbols.  Not a major problem but not pretty to look at.  The characters that look strange are the “curly quotes” and other pretty characters from Word that don’t work brilliantly when pasted into HTML.  In web-safe fonts, they’re supported but in non web-safe fonts they’re not and Chrome throws a bit of a wobbly.  IE and Firefox seem to be immune to it.

I have the same problem when trying to enter a password into WordPress:

wordpress

I finally tired of it today and looked for a solution.

It’s fairly easy thankfully.  Google allows you to provide your own custom CSS changes that overrides the website CSS.  So if you wanted to have a red background on every single website you visited (why not?) then you could do it in the custom CSS.  By editing this file, we can force it to replace Helvetica with something more robust, such as Arial.

To find the custom CSS file, go to

C:UsersYOURUSERNAMEAppDataLocalGoogleChromeUser DataDefaultUser StyleSheets

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

Then paste in the following 3 lines:

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

Save the file and then you should immediately see the fix.  For me, the SniffPetrol site now looks like this:

sniff2

Problem solved!  At least, it should be until Google updates your browser again.  I don’t know if it overwrites your custom CSS or not.  Hopefully not, but I’ll keep you posted.