I'm having some problems with font rendering in Firefox. I have disabled ClearType/Font Smoothing in Windows 7 because I don't like smoothed fonts (unchecked "Smooth Edges of Screen Fonts" in in the performance section of the System control panel), and now it appears that many uses of downloadable web fonts render very badly in my browser, for example:
Notice that some (but not all) of the vertical lines appear bolded
[source of text].
I know this has something to do with downloadable web fonts, since regular fonts appear to render correctly. I can work around the issue by completely disabling downloaded fonts:
gfx.downloadable_fonts.enabled = false
However, I would prefer to download the fonts and have them render correctly. How can I configure Firefox so that downloadable web fonts render nicely without font smoothing?
Also, what is the effect that I'm trying to get rid of called? It appears the font is being rendered to make the smoothed version look better, but that's not getting disabled with smoothing is. I'm also having a similar problem in Chrome.
I am using:
- Windows 7
- Firefox 40
Best Answer
So, I should probably post the answer I've learned since originally asking my question.
tl;dr: it's expensive to create fonts that render well at screen resolutions without font smoothing, so most makers of web fonts don't even try. There's no way to make a badly hinted font look acceptable without font smoothing.
The core problem is that it appears that creating a font that looks nice on a screen is expensive. The shapes of the letters are stored as mathematically-defined curves that can be scaled to any resolution, but at low resolutions those curves don't nicely fall on the right pixels, so they require something called font hinting to display crisply. Font hinting can be done manually, by hand, or automatically, by a computer program such as ttfautohint.
The best results are from manually hinted fonts. Microsoft spent a lot of money to manually hint the fonts that are traditionally included with Windows, so they display very nicely even without ClearType/Font Smoothing.
Automatically hinted fonts are greatly inferior. Most of them require some kind of ClearType/Font Smoothing to have an acceptable display result at low resolution, because their raw form looks like the crap in the screenshot I included in my original question, with double-thick lines and the like.
That used to not be a very big issue, because most web pages were designed to use fonts that were already present on the user's computer, and those were usually high-quality. Then web fonts were invented, which let every website designer ignore the user's high-quality local fonts and instead use some lower-quality font they liked the look of. This also encouraged the use of custom fonts for things like UI icons and logos.
So, if you hate ClearType/Font Smoothing and have a standard-resolution display, you're SOL unless you try to wrest control of font choice from the web pages you're viewing. That's going to be a difficult and long battle, since text usually renders perfectly fine with local fonts, but you still need the web fonts for icons. You probably don't want to use the browser flags to completely disable webfonts. Here are a couple tools that will help.
Chrome: Font Blocker. This tool will allow to right click on some text and block the custom font used. It will work on many webpages, but increasingly has problems with Google's properties.
Firefox: Font blocker foxified. This tool appears to be the same Chrome extension above, but packaged for Firefox. It works the same way.
I do wish someone would create something like an ad-blocker for web fonts, that would use a community managed list of font substitutions and page fixes to make the web easily browsable without non-icon web fonts.
Eventually, the move to higher display pixel density will render this problem moot.