Firefox and bad font rendering under Windows 7
October 6, 2019 6:21 AM   Subscribe

Why do certain fonts on certain websites look like utter trash under Firefox, and how can I fix it?

Here is an example of four sites. In each case, the font looks like it was rendered with broken hinting. This is extremely annoying - it's like a bad joke of horrid linux desktops from 20 years ago. All of those screenshots were taken with a completely new and blank profile (no extensions or modified settings) with the current latest version of Firefox (69.0.2 x64), running under Windows 7 x64 with all updates. The graphics card is a GTX 970.

I've done all the googling. This person had a problem similar to mine but his was related to the fact that he was using a local copy of the font. I've verified that in all of the examples, the font is listed as "remote" in my browser. I've tried fiddling with all kinds of settings in about:config, for example I tried everything mentioned in this thread and none of them had any effect.

It's not a new problem, either - it's been happening for several years. My actual daily driver browser is Waterfox which is based off of Firefox 56 and which also looks like a dog's breakfast on those same example sites. But I figured I'd test and report with current mainline Firefox and no extensions just to rule everything out.

And just to be clear - most fonts look fine, it's just every now and then a certain combination of typeface and size (I'm guessing?) causes this terrible rendering.

Chrome renders two of them fine and two of them somewhat better but not great, so perhaps Proxima Nova is just terribly designed or something and Chrome does a better job of stumbling through.

Cleartype is obviously on and I've run the Cleartype tuner.
posted by Rhomboid to Computers & Internet (2 answers total) 2 users marked this as a favorite
I wonder if the site is delivering a mobile version of the font? I was surprised to learn that quite a few mobiles use unhinted fonts to cut down on the download size. With high screen density on a mobile, you don't really need hinting as much as you might on a laptop/desktop.

IME modern Firefox ≥ v57 renders fonts so much better than old versions. Older FFs also used to do their own screen colour correction outside the OS's colour management so they could also render antialiasing too dark and blocky.
posted by scruss at 7:33 AM on October 6

I noticed similar ugliness in Chrome + Windows 10 when I first switched away from MacOS. I documented a couple of examples in February 2017. Both live sites look better to me today than the screenshots I archived (in both Chrome and Firefox), so I suspect either Windows font rendering or browser rendering got better. Or the site design changed.

I made a screenshot of your second sample on my Firefox + Windows 10 system. It looks better than yours to me. Not perfect; the word "Engagement" is a good example. My E also shows a too-thick upper horizontal line, but maybe not quite as bad. The bowls in lower case "g" aren't broken like yours. The anti-aliasing in "W" is better. (Here's a screenshot of Chrome + Windows 10 for comparison. Chrome renders the whole thing heavier.)

Honestly your sample looks like ClearType or whatever subpixel rendering is being used isn't working right. That might be a Windows 7 problem. But I'm not sure; I know browsers use their own font rendering at least to some extent, but I don't know the details.
posted by Nelson at 8:33 AM on October 6

« Older My Heart Needs to Feel some Sax   |   How do I make foods sticky for my dog? Newer »

You are not logged in, either login or create an account to post comments