I first noticed a font rendering problem when viewing some web pages in Firefox. There were two cases. The first case was easy to solve. The second case was specific to Firefox, and the fact that many people posted complaints online only made it harder to pinpoint the cause.
Let’s start with the easy one:
- Go to Tools -> Preferences -> Content
- Under Fonts & Colors, find Advanced
- Uncheck Allow pages to choose their own fonts
- Set fixed fonts:
- Proportional: Sans Serif
- Serif: DejaVu Serif
- Sans-Serif: DejaVu Sans
- Monospace: Luxi Mono
- Minimum font size: 10
DejaVu should come by default with your Linux distribution, as it is an open source font project. Making the above changes will force sites like lifehacker that use Windows fonts to use Linux fonts. For more information, see Help for the Options window.
The second case was harder. I will go through the most common misconceptions first.
Mozilla does acknowledge there is a font problem on Unix platforms, and they have many solutions that did not fix the problem for me. At one point in the article, they suggested the problem was caused by a missing –enable-xft flag. For my system with fontconfig, the article declared, “xft labeled builds should produce clearly better results”. Now, I went about looking for builds with this flag, but it turns out this was a fallacy, too. My fontconfig file clearly affected font rendering on Firefox, as my test script showed. I was able to control the level of hinting at different pixels.
Ubuntu users also noticed this quirk with Firefox, although their fixes did not work for me. One user reported success with changing a Mac OS X setting on Linux. Another suggested a tweak “for advanced ligatures and smarter kerning”, not something I’ve heard of as far as font smoothing goes.
So enough with the fallacies, time to read articles posted by knowledgeable people (again). I mentioned in an earlier article what got me into this font business was a post I read back a while ago on Gentoo Linux. I still have its first edition in my email archives. So what was the problem, and how did I solve it? Firefox used the Cairo backend for rendering graphics. This was good as far as pretty vector graphics went. However, it turns out that Cairo is a poor choice for font rendering, as it needs to be patched to render bitmaps correctly for LCDs. Fixing the problem is easy on Gentoo:
- vim /etc/portage/package.use
- insert “x11-libs/cairo cleartype”
- emerge cairo
The next time I used Firefox, I noticed the discolored edges around fonts were gone! No more eye sore reading web pages!