Setting "cursive" and "fantasy" in Firefox: two methods (Shallow Thoughts)

Setting "cursive" and "fantasy" in Firefox: two methods

I'm taking a CSS class, hoping to get a more solid understanding of these CSS parameters I tweak and why they do or don't work, and one of the exercises involved using the CSS font family "cursive". Which, on my Firefox, displayed in MS Comic Sans. That doesn't look very cursive to me!

To test what you're seeing now for cursive and fantasy, use the W3C font-family test page ... or these might work (though they might not survive RSS feeds to other sites):

This is a Cursive font ... ... This is a Fantasy font

Being a font junkie, I have plenty of nice cursive fonts installed. The question was how to tell Firefox about them, since its font dialog (unlike the old Seamonkey/Mozilla suite's) doesn't make any allowance for setting them, nor do the categories show up in about:config.

Method 1: Firefox prefs

The answer was in this Mozillazine thread. Edit user.js in your Firefox profile and add lines like:

// Set cursive and fantasy fonts
user_pref("font.name.cursive.x-western", "Allegro");
user_pref("font.name.fantasy.x-western", "Dragonwick");

(of course, use fonts you have installed, not necessarily Allegro and Dragonwick).

The bug (marked WONTFIX) requesting Firefox offer this in the Preferences window is bug 196405, and related bug 61883.

Method 2: fontconfig

But wait! Soon after I figured out how to set the font family for Firefox, I noticed that the font was still MS Comic Sans in other browsers -- konqueror, midori, opera. It occurred to me that that Comic Sans cursive was probably coming from fontconfig settings, and it should be possible to change fontconfig's defaults for these categories.

And indeed it was, and fairly simple, too. Just make a file named .fonts.conf in your home directory and add this to it:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <alias>
    <family>cursive</family>
    <prefer>
      <family>Allegro</family>
    </prefer>
  </alias>
  <alias>
    <family>fantasy</family>
    <prefer>
      <family>BoomerangItalic</family>
    </prefer>
  </alias>
</fontconfig>

Again, substitute your own fonts ... but beware. The hard part of this exercise turned out to be that some fonts worked and some didn't, following no rhyme or reason. My first five choices for a fantasy font weren't picked up by fontconfig, but finally I found a few that were. It isn't related to whether they have spaces in the font name; it isn't where they're installed (I was using only fonts in ~/.fonts); I have no idea why some fonts work in ~/.fonts.conf and others don't.

It's rather tedious to test, since the only way to test it is to exit and re-start firefox. I've never found a font viewer that will display the fonts visible to fontconfig or pango; you have to start up some full-fledged application like firefox or gimp, and gimp doesn't see categories like cursive or fantasy.

In the end I did find fonts that worked in firefox. But ironically, although the system-level fix seems like a better way to go, my font changes still don't show up in other browsers. In opera, cursive shows up in bold block letters, while its fantasy is MS Comic Sans. Konqeror and Midori don't handle cursive and fantasy at all, showing them as plain sans-serif. And in IE6 running under wine, cursive still shows up as MS Comic Sans ... while fantasy displays in Greek letters.

Tags: mozilla, firefox, fonts, css
[ 21:30 Apr 13, 2009    More tech/web | permalink to this entry | ]