HOWTO: Pretty Up Firefox/Thunderbird UI Fonts

Posted on February 12, 2007

One of the few things I don’t like about the default settings in Kubuntu are the fonts.  They’re atrocious.

As you can see, the default fonts have weird proportions; everything looks too wide and fat. 

Thankfully, most systemwide fonts can be changed easily enough through the KDE Control Center (I like the Deja Vu Condensed family, myself). However, you’ll notice after tweaking your fonts there that Firefox and Thunderbird don’t respect KDE’s font settings. This leaves those apps looking weird when everything else is prettied up.

Why is that? The answer is because Mozilla apps don’t have their user interface drawn by the system — they use their own graphical toolkit, called XUL. 

At one level, this is annoying, because it means Firefox & Thunderbird don’t follow the rules all other apps do. But on another level, it’s kind of cool, because XUL is just a specialized dialect of XML + CSS + JavaScript. So you can actually customize Firefox/Thunderbird’s UI fairly extensively with the skills any web developer possesses.

The key to all this is a special file in your profile, called userChrome.css (it’ll be in a subdirectory of your profile, called "chrome"). In userChrome.css, you can drop in CSS rules that can affect the whole user interface, or just the parts you specify.

So for instance, say we want all the UI fonts in our Mozilla app to be 14pt Deja Vu Sans Condensed.  We just open up userChrome.css and drop in the following rule:

* {

    font-family: "Deja Vu Sans Condensed";

}

Then just restart the application, and the whole UI will be in the font you specified:

Pretty cool! There’s a lot more you can do with userChrome.css, but this is an easy, useful tweak.

Remember, if you use both Firefox and Thunderbird, you’ll have to do this twice — once in your profile for each app. In Ubuntu, your Firefox profiles are typically stored in ~/.mozilla/firefox/, and your Thunderbird profiles in ~/.mozilla-thunderbird.

(One more thing: this tip works in Windows & OS X, too. I just classify it as a Linux tip because it’s only on Linux that the default fonts are annoying enough to make me want to change them.)

UPDATE (March 2, 2007): One thing I noticed after writing this was that not all my KDE apps were using my new font choices after I changed them in the KDE Control Center. Adept, for example, was still using the old fonts. It took me a while to figure out what was up — programs that you run as an administrator via sudo don’t use the preferences you set in the control center when you’re not an administrator; you have to run the control center itself via sudo to set the preferences for the apps you run as an admin.

It’s easy enough to run the control center in admin mode:

kdesu kcontrol

does the trick fine.