Ugly fonts in X

While upgrading Mozilla on a FreeBSD platform, I inadvertently blew away all my font settings. The default font for the Google input box, Slashdot moderation dropdowns etc, looked really ugly. Some of the fonts used in the JDK HTML documentation also showed the same ugliness.

I tracked this down to the Helvetica font. By modifying the following three files, I was able to replace Helvetica by Arial, thereby saving my eyes from squint-related damage:

~./fonts.conf

The ~./fonts.conf file defines, on a per-user basis, various font properties for X. If you need to make the changes available on a system-wide basis, alter the file /usr/X11R6/etc/fonts/local.conf instead [N.B. FreeBSD location].

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
 <!--  Enable sub-pixel rendering (not)
  <match target="font">
     <test qual="all" name="rgba">
	   <const>unknown</const> 
	   </test>
	   <edit name="rgba" mode="assign"><const>rgb</const></edit>
	   </match> 
-->

<!-- Turn off  antialiasing for fonts in the 9-14 pt. range -->
	<match target="font">
		<test qual="all" name="size" compare="more">
			<int>8</int>
		</test>
		<test qual="all" name="size" compare="less">
			<int>15</int>
		</test>
		<edit name="antialias" mode="assign">
			<bool>false</bool>
		</edit>
	</match>

  <match target="pattern">
    <test qual="any" name="family">
      <string>fixed</string>
    </test>
    <edit name="family" mode="assign">
      <string>mono</string>
    </edit>
  </match>

  <match target="pattern">
    <test qual="any" name="family">
      <string>Courier</string>
    </test>
    <edit name="family" mode="assign">
      <string>Courier New</string>
    </edit>
  </match>

<-- Use Arial in preference to Helvetica -->
  <match target="pattern">
    <test qual="any" name="family">
      <string>Helvetica</string>
    </test>
    <edit name="family" mode="assign">
      <string>Arial</string>
    </edit>
  </match>

  <match target="pattern">
    <test qual="any" name="family">
      <string>monospaced</string>
    </test>
    <edit name="family" mode="assign">
      <string>mono</string>
    </edit>
  </match>
  <match target="pattern">
    <test qual="any" name="family">
      <string>console</string>
    </test>
    <edit name="family" mode="assign">
      <string>mono</string>
    </edit>
  </match>
  <match target="pattern">
    <test qual="any" name="family">
      <string>mono</string>
    </test>
    <edit name="spacing" mode="assign">
      <int>100</int> 
    </edit>
  </match>   
 
<!--  enabling this causes truetype Arial font to look disgusting
      when anti-aliasing is off
<match target="font">
<edit name="autohint" mode="assign">
<bool>true</bool>
</edit>
</match>
-->
</fontconfig>

Mozilla Chrome files

In the ~/.mozilla/default/-salt-/chrome, there are two files that can be used to customise the look of Mozilla. The userChrome.css file sets the Mozilla UI, while the userContent.css sets the page content look. These are the settings I have currently defined:

userChrome.css

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace  url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 /* Above line sets default namespace to XUL */

/* All UI uses Arial */
* {
    font-size: 10pt !important;
    font-family: "Arial" !important;
    font-weight: "medium" !important;
    font-style: "roman" !important; 
}

userContent.css

/*
 * Edit this file and copy it as userContent.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to apply a style to all web pages you view
 * Rules without !important are overruled by author rules if the
 * author sets any.  Rules with !important overrule author rules.
 */

/* Text in input and selection boxes should use Arial */
input {
    font-size: 10pt !important;
    font-family: "Arial" !important;
    font-weight: "medium" !important;
    font-style: "roman" !important; 
}

select {
    font-size: 10pt !important;
    font-family: "Arial" !important;
    font-weight: "medium" !important;
    font-style: "roman" !important; 
}