linux - How to get Firefox to use MS TrueType fonts for Helvetica, Times, etc?

I'm using (Windows) TrueType fonts on my Ubuntu workstation (details), and am mostly happy with how fonts look, both in desktop apps and on the web (using Firefox).

However, on some web pages, like this one, fonts completely suck:

I found the reason to be Helvetica in the CSS for that site:

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

When, using Firebug, I remove Helvetica from that list, it uses Arial and looks all spiffy again:

My question is, how to make web pages that use Helvetica (or Times, or other such fonts) look nice automatically? In other words, how to map Times and Helvetica font families to the serif and sans-serif defaults (which in my case would be Times New Roman and Arial, respectively)?

I'm interested in any solution that makes Firefox use the MS TrueType fonts in this scenario, no matter if it's based on tweaking Ubuntu font configs or custom CSS rules in Firefox (or something else that I currently have no clue about).

Update: I've now got the problem fully solved - this answer describes what I needed to do.

Edit: I completely updated this answer after getting some breakthrough advice from a colleague.

Here's what I inserted in /etc/fonts/local.conf (inside the <fontconfig> element):

<!-- Replace Helvetica with Arial -->
<match target="pattern">
    <test qual="any" name="family">
        <string>Helvetica</string>
    </test>
    <edit name="family" mode="assign" binding="strong">
        <string>Arial</string>
    </edit>
</match>    

Similarly for Times -> Times New Roman. (See my full local.conf here.) The key was to use binding="strong" for the <edit> element. (Also, using "assign_replace" mode instead of "assign" causes something similar, except that then it's too aggressive: also Verdana gets replaced with Arial).

Changes in font configurations are effective immediately. Besides testing in Firefox, you can check that it works like this:

$ fc-match helvetica
Arial.ttf: "Arial" "Normal"

If you run into problems, the best help is near: man fonts-conf. (Although even with the documentation, the workings of the font system seemed somewhat complicated or unwieldy to me.) You can also try to "debug" what's really going on using a command like:

FC_DEBUG=4 fc-match helvetica

In addition, FC_DEBUG=1024 fc-match helvetica shows the list of config files that affect the font matching.

I had a similar problem in Opera, the solution to which was to disable "Core X Fonts" in the config. I'd suggest seeing if there is a similar option in Firefox.

Other options:

• Check that you definitely don't have a font called "Helvetica" installed, similar things happened to me a few times. IIRC the problem fonts were in folders called 100dpi and 75dpi in the system font folder (/usr/local/share/fonts I think). I just moved those folders out of there entirely.
• Check the defaults under System > Preferences > Appearance > Fonts.
• Check Firefox's defaults under Preferences > Content.

If you make changes to the core folders you will need to rebuild the font cache with:

sudo fc-cache -f -v

Greasemonkey will be one of solution for your question. Install this addon and you can customize the web pages and change the fonts.

and one example script which changes the font to Helvita

// ==UserScript==
// @name           Google Reader Font in Helvetica and enlarged
// @version        1.0
// @creator        Joe
// @description    Changes the font family and size from Google Reader page
// @namespace      userscripts.org
// @include        https://www.google.com/reader/*
// @include        http://www.google.com/reader/*

// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('.entry-body{font-family:Helvetica;font-size:110%;line-height:150%;}');
addGlobalStyle('A.entry-title-link {font-family:Helvetica;font-size: 20px;}');

Just wondering, could you use local fonts and @font face css?