How do I block a certain font in Firefox?

Question

I have Helvetica installed on my Windows XP PC, which is great for designing, but Helvetica looks horrendous when displayed in a browser on PC.

EG If I visit a website with this style:

font-family: Helvetica, Arial, sans-serif;

...Helvetica is displayed, as it is installed on my system.

Can I force Firefox to pretend Helvetica isn't installed on my system? I want these pages to display in Arial.

Answer 1

The following instructions do not require any plugins or addons, which is a bonus.

1. Find your profile folder.
2. Navigate to the subfolder 'chrome'. If it doesn't exist, create it.
3. Now inside that folder, create an empty file called 'userContent.css'.
4. Open that file in a text editor, and add this text (all on one line): @font-face { font-family: 'Helvetica'; src: local('Arial'); }
5. Save that file and restart firefox.

Just a note about step four. You may need to replace several fonts, so you should copy and paste that line but replacing each font. For example, I need this: @font-face { font-family: 'helvetica neue'; src: local('Arial'); }.

Answer 2

The other day I came across a site that used Comic Sans, and I decided I wanted to replace it with Verdana. I did some googling and found this Greasemonkey script which removes Comic Sans from any website you visit. I rewrote that script to replace Helvetica with Arial

var tags = document.getElementsByTagName('*');
for (var i in tags) {
    var style = getComputedStyle(tags[i], '');
    if (style.fontFamily.match(/helvetica/i)) {
        var fonts = style.fontFamily.split(',');
        for (var j in fonts) {
            if (fonts[j].match(/helvetica/i)) {
                fonts[j] = 'arial';
            }
        }
        tags[i].style.fontFamily = fonts.join(',');
    }
}