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.
