Firefox – How to change the fonts of Firefox/userContent.css

firefoxfontsuser interface

So I'm trying to get Firefox to use the fonts I want for webpages and for the user menus. I've the same thing in both a userContent.css file and as a style with Stylish.

So far, using it in Stylish makes it apply to my user menus, but userContent.css does not.

* {
  font-size: 16px !important;
  font-family: haxrcorp4089 !important;
}

:not( -moz-any(code, pre, tt, var) )  * {
  font-size: 16px !important;
  font-family: haxrcorp4089 !important;
}

code, pre, tt, var {
    font-size: 16px !important;
    font-family: terminal !important;
}

So far, this is not working. I don't know much about CSS, so this is a bit annoying just trying to get Firefox to use fonts consistent with my system theme, and still use the terminal fontface for code. Is there something I'm doing wrong here?

Does it matter what's set in my Firefox Options -> Font Settings in the menus? Is there something I might've changed in about:config that might be a conflicting setting?

Best Answer

Stylish can apply CSS to both chrome (XUL) and content (HTML) if you don't specify a namespace. Without Stylish, you style chrome with userChrome.css and content with userContent.css.

You have to split up your CSS so each rule is in the proper user*.css file.

Stylish and namespaces:

stylish

Update

If you wanted to style all text including the Firefox GUI with HaxrCorp 4089 except for HTML code (and similar) elements...

  • userChrome.css:

    *
{
    font-family: "HaxrCorp 4089" !important;
    font-size: 16px !important;
}

  • userContent.css:

    *
{
    font-family: "HaxrCorp 4089" !important;
    font-size: 16px !important;
}

pre, code, samp, tt, var
{
    font-family: Terminal !important;
}

Note: Firefox 8+ no longer supports bitmap fonts, so you may have to find a TrueType (TTF) clone or alternative to replace Terminal.

Example

Windows 7, Firefox 3.6.28 (Legacy), Terminal (font-size: 10px)

screenshot

Related Question