5

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:

Ugly non-cleartype font rendering

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
8
  • The performance overhead of ClearType is very minimal, is there a particular reason you disabled it? You're basically complaining that ClearType is disabled because you disabled it... Sep 17, 2015 at 18:18
  • I disabled it because I do not like to look at smoothed fonts. I did not do it for performance reasons. For historical reasons, the setting (along with a lot of other UI ones) are on a performance configuration dialog.
    – Kaypro II
    Sep 17, 2015 at 18:19
  • Your problem with the font, is a hardware problem, not something that can be fixed in software.
    – Ramhound
    Sep 17, 2015 at 18:25
  • Fonts aren't hardware, but if the problem is with the fonts themselves, could you point me to a link describing what they're doing and why?
    – Kaypro II
    Sep 17, 2015 at 18:38
  • 2
    I had the same problem when I used a CRT monitor with ClearType disabled. There is nothing else you can do :( The problem lies in the fonts themselves. Only fonts with delta hinting will be displayed properly but almost all of the commonly used Web fonts have not been delta hinted. Blocking downloadable fonts completely or overriding them with your own is the only viable solution.
    – tomasz86
    Jun 21, 2016 at 12:41

2 Answers 2

4

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.

2
  • 1
    Thank you so much! This is such a pain that I ended up re-enabling ClearType on the display I use for browsing mainly (and still had to override the fonts in GMail via userContent.css).
    – Nickolay
    Apr 5, 2019 at 8:52
  • 1
    Font blocker make the trick! Thanks!
    – aurelien
    Sep 5, 2020 at 16:25
1

Sadly, you can't.

Thing is : blurry fonts are blurry BY DESIGN, and therefore have to be disabled if you want them to be sharp (i.e. replaced by good ol' fonts like Arial).

I disable cleartype everywhere I can, since it hurts my eyes and gives me headache. Here's what recently saved me, since I couldn't even read my GMail anymore with the fuzzy (Roboto ?) font used since the last update.
(I had to switch back to HTML view to get something usable...)


Disabling fancy web fonts that are nearly always blurry :
Source : http://annystudio.com/misc/anti-aliased-fonts-hurt/

--

Mozilla Firefox :

Open by typing about:config in the address bar.
Set gfx.downloadable_fonts.enabled to false.

You can also replace all the fonts with the font of your choice by going to Tools – Options – Content.

--

Google Chrome

Right click Chrome’s launcher icon, choose Properties. At the end of the launcher string add --disable-remote-fonts

--

Note that while I didn't try it, the Firefox solution seem to include a way of replacing some fonts with others, hence, not disabling every of them, but just replacing, with a probably higly customizable granularity.
Btw, most fonts designed to be blurry will still be horrible if you don't replace them... but if you find (or design) sharp versions of those and configure such replacement, you actually could have fonts close to the original ones without having to mass-disabling everything.

Btw, I noticed you already had the FF solution in your post, but I kept it since I suppose people looking for it may be interrested in having solution for both browsers at once.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .