My text spacing problem in Firefox 3

When I upgraded from Firefox 2 to Firefox 3, Google’s website looked horrible. The spacing between letters was completely jumbled—some letters were crammed in much too close to one another, others had huge gaps between them.

I tried everything from running Firefox in safe mode to deleting every preference file and reinstalling the application, all to no avail. After an entire afternoon of frustration, I finally nailed down the problem: Arial.

Before & after

An outdated font file

Google uses the font Arial on its search results page. By manipulating Google’s CSS with FireBug, I realized that I could correct the spacing issue by specifying any font other than Arial.

It turns out that I had an old version of Arial installed on my computer (perhaps as a result of Darwine).

The solution

To solve the problem once and for all, I simply deleted the old Arial font file. To do this, open the application Font Book. Be sure the “All Fonts” collection is selected. Find Arial in the second column, right click on it, and select “Reveal in Finder.” Font Book will open a new Finder window with the Arial font file selected. Drag the file to the trash.

Because Arial comes pre-installed with OS X, there is a already a correct version of the font located at Macintosh HD > Library > Fonts. If the operating system cannot find a font file in your user account (the one you just deleted), it will then use the font located in your root library.

Why this problem occurs in Firefox 3 and not in Firefox 2 or in Safari I have no idea. But by deleting the bad Arial font file from my home folder, FireFox 3 was then able to access the correct Arial font that shipped with OS X. Problem solved!