How do I block or substitute 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.

For example, I visit a website with this style:

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

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

Can I force Firefox to pretend Helvetica isn't installed on my system, and render these pages using 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(',');
    }
}

Answer 3

I think User CSS/User Styles can help in that you can force the browser to override the pages style.

Some tutorials to help