Installing Helvetica Neue Fonts with Google Chrome on Windows considered harmful
A few days ago, I visited the Xamarin.com website and noticed this. The word "Pricing" looks like "Prioing."
It's not an illusion. It looks wrong in Google Chrome. See this zoomed-in shot.
_2.png "The C looks like an O in Chrome")
Here's the same menu in IE. Note the subtle"bites" that have been taken out of the g and s, but the c is OK. The hinting is OK, but the font is somehow "wrong."
I emailed support@xamarin, and mentally blamed Google Chrome as it's well know they've been having trouble with their Web Font rendering of late. In fact, Jin Yang (@jzy) had to abandon Montserrat, our Web Font of choice, for a more conservative one whilst doing the Hanselman.com redesign due to Google Chrome's poor font rendering on Windows. (It's lovely on Mac.)
I also happened to be at the Xamarin Evolve conference this week, so I mentioned it to the team down there, thinking they could pick another font.
Fast forward, and I'm on the plane, checking my email with Gmail Offline (the HTML5 offline version of Gmail) and noticed this.
These fonts look like crap too!
What's going on here? What's changed? Doesn't it seem like "What's changed?" is the question we engineer-types ask the most?
Well, what's changed is that I gave a talk at Xamarin Evolve this week, and in preparation, installed Helvetica Neue. It's a lovely font and I think it worked nicely for my talk and looked great in PowerPoint.
However, Helvetica is super common font that is mentioned in Stylesheets - often explicitly when CSS is designed on a Mac - and Arial on Windows usually steps in as the replacement on Windows.
The Helvetica Neue font that I installed for my presentation is very poorly hinted (if at all) at small sizes like the one's being used. It's just not a Web Font, and while it's great for the giant sizes I needed for my talk, it's lousy for the web.
Both IE and Chrome were picking up that my system had a Helvetica available on the system and used it instead. The Stylesheet said "hey, gimme Helvetica" and the browser said "Cool, here's one."
While it's obvious it would have major effects in retrospect, I had never realized that a machine-wide "common" font installation like this could mess up font rendering in my browser. I think the best solution (even though I'm deleting Helvetica Neue) would be to use an explicit Web Font in your stylesheets when possible rather than relying on a system font like Helvetica, even though they are the ultimate fallback. Any designers want to weigh-in the comments?
Here's Chrome now on Windows with Helvetica Neue removed:
And IE
I hope this post helps someone who might bump into this font issue. My sincerely apologies to the lovely Xamarin employees who took my "bug" seriously! Thanks to Damian Guard for his Font insight!
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
Mac pretty much ignores most of the hinting so doesn't suffer this problem.
[)amien
Amen brother.
He had installed Helvetica (regular, not Neue) on Windows 7 and was using IE9. Our stylesheet's font stack was "Helvetica, Arial, sans serif", so his system was also defaulting to his local Helvetica font. For some crazy reason IE9 simply wouldn't render the input fields on the site's login page. It's like they weren't even on the page.
Took forever to track this down and reproduce, but it did come down to the locally-installed font; removing it caused the inputs to immediately reappear. So we added an IE-specific stylesheet rule that swapped the font stack to "Arial, Helvetica, sans-serif" and all was well.
Maybe we should all just use Open Sans from now on...
Open Sans and Roboto are the only way to go :-)
In Windows browsers, you get Arial, on OSX you get Helvetica, on Android you get Droid Sans, etc... Very similar fonts that look great on their intended devices. Helvetica/Arial/Sans etc are set as the respective "sans-serif" default in most browsers on their respective platforms... leave it that way.
/rant
One word too many I think. Fun article though.
To answer your question Scott, if you care, then really care:
Arial, Helvetica, Droid Sans, etc., etc., etc.
If you don't care that much:
sans-serif
There is a solution for Chrome that doesn't require you to uninstall the font.
http://thomaslittle.tumblr.com/post/13973246295/chrome-helvetica-bug-fix-for-windows-7
The reason is the fonts are loaded into memory as part of the post boot sequence.
Here is what I did and solved it.
1) start windows in safe mode -> command prompt -> admin account
2) cd over to the ( >cd %windir%\fonts ) or if you have a default install (99% of the world >cd c:\windows\fonts\)
3) del "Helvetica Neue..." whatever fonts you want to remove
FIXED. More details are on the blogs site of mapjects.com
http://thomaslittle.tumblr.com/post/13973246295/chrome-helvetica-bug-fix-for-windows-7
I have lot of fonts on my PC and need them as a designer.
Little did i know Neue was the reason the designs looked a mess on my chrome but fine on the clients.
Should i remove the entire Helvetica Neue Family or just that one font.
Wish there was an option to disable the fonts in PC and not removing Helvetica Neue. (tried the hide option in fonts directory, but no luck)
edit:Going to try THOMAS LITTLE's option as Vedran mentioned above.
http://thomaslittle.tumblr.com/post/13973246295/chrome-helvetica-bug-fix-for-windows-7
worked for me as well (Chrome on Windows8 pro). Thanks a ton!
here's a screenshot of the steps: http://prntscr.com/1o6hhb
any idea what i'm doing wrong?
please advise. thanks in advance!
Seems that this install didn't just mess up Chrome but it messed up all my browsers.
The fix on "https://gist.github.com/thomaslittle/1452379" Did work though (for Chrome).
Suggestions?
Right! (so why can't I simply have Chrome ignore it since I installed it for Photoshop).
This is a Chrome problem regardless of PC .. I'm on a Mac.
Installing a "web font" is fine -- unless you are a print designer (as I am). Do I need to install and deinstall fonts as I need them to avoid this?
Website: https://code.google.com/p/mactype/
Comments are closed.
You might also want to check out (or chime-in) this issue and this issue.