How to override website fonts in Firefox?

Question

Consider the scenario where a site hardcodes a font name in an HTML document:

<font face="Courier">Hello!</font>

Question: can you configure your system, or an application like Firefox, to use another font instead of the specified ugly font?

Answer 1

You can override any website with your font choices in Firefox.

• Open the Tools->Options menu.
• Select the "Content" tab.
• Click the "Advanced" button in the "Fonts & Colors" section.
• Specify the fonts you would like for each of the types for your encoding.
• Uncheck the check-box labeled "Allow pages to select their own fonts...".

Answer 2

Do you use linux? For a system-wide font replacement configuration for your user, you can use a ~/.fonts.conf like mine (This is to use the Liberation fonts instead of Time & Arial). See also man fonts-conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>


        <!-- Reject bitmap fonts in favour of Truetype, Postscript, etc. -->
        <selectfont>
                <rejectfont>
                        <pattern>
                                <patelt name="scalable"><bool>false</bool></patelt>
                        </pattern>
                </rejectfont>
        </selectfont>

        <!-- Liberation fonts -->

        <alias>
                <family>Times</family>
                <prefer><family>Liberation Serif</family></prefer>
        </alias>
        <alias>
                <family>Times New Roman</family>
                <prefer><family>Liberation Serif</family></prefer>
        </alias>
        <alias>
                <family>Tahoma</family>
                <prefer><family>Liberation Sans</family></prefer>
        </alias>
        <alias>
                <family>Lucida Grande</family>
                <prefer><family>Liberation Sans</family></prefer>
        </alias>
        <alias>
                <family>Arial</family>
                <prefer><family>Liberation Sans</family></prefer>
        </alias>
        <alias>
                <family>Verdana</family>
                <prefer><family>Liberation Sans</family></prefer>
        </alias>
        <alias>
                <family>Courier</family>
                <prefer><family>Liberation Mono</family></prefer>
        </alias>
</fontconfig>

Answer 3

Check out Stylish, an add on for Firefox:

Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun.

Answer 4

Create a user stylesheet with a line like:

font { font-family: Verdana, Geneva, sans-serif !important }

This will only affect font tags and not any text styled with css - or text that you'd expect to use Courier such as that within <code> or <pre> tags.

You could also add 'font-size: 100%; color: black' etc. to further control the text.