Update (2011-01-08): Updated for Google Chrome.
I’ve recently had trouble reading sites which use the Helvetica Neue font. With Firefox (and with Chrome) running on Windows, this font gets rendered in a way which makes reading very difficult. See the screenshot below for an example.
Helvetica Neue on Windows, Firefox 4 beta 6
Same page but with Arial used in place of Helvetica Neue
Many others have experienced the same problem—for some the use of Helvetica produces even stranger results.
So why aren’t more people talking about it? Well, according to Code Style, only 1.65% of Windows users have the Helvetica Neue font installed compared to 95.78% of Mac users. Anyone who doesn’t have the font installed will see either Arial or another sans-serif font. But what about those of us who do it have it installed?
With CSS’s @font-face rule it’s possible to override a website’s choice of font and replace it with whatever you prefer:
@font-face { font-family: 'font to replace'; src: local('local font'); }
To replace all instances of Helvetica Neue with Arial:
@font-face { font-family: 'helvetica neue'; src: local('Arial'); }
If you apply this last rule to all sites you visit, you’ll always see Arial instead of Helvetica Neue. To do this in Firefox, I recommend installing the Stylish add-on and then my Kill Helvetica style. The Stylish extension is also available for Chrome, but in Chrome Stylish user styles get applied after the page has loaded (which means you’ll see the badly rendered fonts while the page is loading).
For even more flexibility, and especially for Chrome users, you can apply these styles without installing any add-ons. Both browsers override page styles by referring to a user stylesheet. In Firefox, you can add the rule to the userContent.css file. In Chrome, it’s the Custom.css file (on Windows, this will be at appdata\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css). In Chrome, user styles in Custom.css are applied immediately so there’s no delay.
For Firefox users, Tito Bouzout’s Font Replacer add-on uses this method but lets you specify the fonts to replace without making you write the CSS yourself.
10 Comments
Thank you so much. I was seeing horrible outlined text every time helvetica neue was used. Problem solved by adding that line to custom.css.
Thanks a ton! Finally the ugly web is history! Victoryreyeyeyeyeyey!!!!
OMG, finally! Thankyouthankyouthankyou!!
For whatever reason, all my browsers suddenly began having difficulty rendering Helvetica Neue and it’s been painful.
I tried it and it works!
Thank you!!
This was driving me nuts. I have lots of fonts installed as I work with PhotoShop a lot. My experience was exactly like your screenshots, very heard to read.
For anyone new to Stylish – add Stylish first, restart FF, then add the Kill Helvetica style (once Stylish is installed, an install button will appear). Take care to ignore the Google ads which masquerade also as download button.
Glad this post is proving useful.
Edith: Sorry about that horrible download button – I have no control over the Stylish website. I will probably remove it and host the style here because of that. (Incidentally, I use Adblock Plus, which is so effective in removing ads from sites I visit that it often makes it difficult to make a good judgement about sites to use and link to.)
Update: Unlike its counterpart Greasemonkey, Stylish does not appear to offer a way for users to install styles with a direct link to the CSS. So instead of removing my entry on userstyles.org, I’ve updated it with a notice about the disguised ad and also posted a screenshot of the deceptive ad on Dark Patterns.
Thank you!!! & Happy new year!
thank you so much for this !!
finally my view are normal again… ^^
1000 times….THANK YOU!
I changed twitter.com to no longer request Helvetica Neue or Helvetica as the preferred font when the OS is Windows. Does this fix the issue (at least for this one site) ?
…thank you.