How can I change the fonts of Firefox/userContent.css?

Question

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?

Solution

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:

---

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)

Comments

[iglvzx]

Well, you can quickly test if it is just your profile by trying a new profile: support.mozilla.org/en-US/kb/…

[GrinReaper]

@iglvzx OK, I made a new profile, and I'm on it now. I applied the same things through styler. It's still not excluding code from the first rule properly.

[Peter Mortensen]

Related: How can I change link colors in Firefox and Chrome, but leave all other colors and fonts as they are? (also about file userContent.css)

[GrinReaper]

So assuming my name spaces are correct, should the code I posted work as intended? Set all (if not most) body text and headers to use the font "haxrcorp 4089" and use the font "Terminal" for blocks of code? Because I've played around with my userContent and userChrome configs and it isn't working.

[iglvzx]

You shouldn't specify the namespace in the userChrome or userContent CSS files. I can write up the CSS for you, I just you to clarify exactly what you want styled. Correct me if I'm wrong: You want code, pre, tt, var styled with Terminal, but everything else including the Firefox GUI styled with haxrcorp4089 ?

[iglvzx]

@GrinReaper I've updated my answer with proper CSS. Also, Terminal is a bitmap font, so you may have to find an alternative/clone.

[GrinReaper]

Ah, I understand now. The fact that bitmap support is gone was probably why nothing I tried was working, I was only trying bitmap fonts since all the monospace fonts I actually like are bitmap!

[GrinReaper]

I tried the userContent and userChrome configs you posted. I'm sure they're in the correct chrome directory, and even made sure the code is in the appropriate files. It's not working; I even tried changing the fonts (using only TTF) and that makes no change. Then i tried this code in a new profile. It's working in the same incorrect way in an empty profile with no extensions or any changes made to it. I removed the user* files and the fonts stayed as though I didn't remove them...

[iglvzx]

@GrinReaper The location should be ... /<FirefoxProfile>/chrome/user*.css . You have to restart the browser with each edit. Which version of Firefox are you using?

[GrinReaper]

I have restarted the browser upon each edit. I'm using the latest version, 14.0. I ended up fixing it by using the NEW profile. I actually had a stylish script enabled which was conflicting with it. :<