Why are some fonts pixelated (mostly Open Sans) in browser?
Some websites have very pixelated text in my Firefox Browser. As an example most of the text on Mozilla's sites (which I believe is Open Sans) is very pixelated compared to other websites. I have ClearType disabled in Windows because I find that text is clearer with it disabled. Is there a setting I can change in Firefox to fix the pixelated fonts? I can probably force websites to use only one font but I would prefer to use the fonts specified by the website.
All Replies (9)
This question's page says that enabling ClearType solves the problem (if this is the same as your problem). However, if that doesn't work or you really don't want to, you could read this.
Just a footnote in reference to Jess Stryker's article that the gfx.content.azure.enabled preference no longer exists in Firefox 28. In other words, it is always enabled now.
I think someone developed a hack in another thread to substitute specific fonts, so if you develop a list of fonts that do not render nicely you could instead use a more traditional font in their place. Sounds like it might be more effort than it's worth unless readability is a major problem.
Try to disable Direct2D by setting the gfx.direct2d.disabled pref to true on the about:config page and leave hardware acceleration otherwise enabled.
See also comment 414 in bug 812695:
You can create this Boolean pref on the about:config page:
- layout.paint_rects_separately = true
Neither layout.paint_rects_separately nor enabling cleartype system-wide fixes the problem for me. It's an ordeal to look at such '95 fonts every day! I have not such issues with IE. I can clearly see blocks e.g. in the 'C' in the 'Commited' title here https://www.mozilla.org/en-US/firefox/32.0.2/whatsnew/
Win 7 x64, updated FF 32.0.2 22" 1920x1080 display
Hi effgo, if you double-click the word Committed, then right-click > Inspect Element (Q) then activate the Font panel on the lower right (see screen shot), if Firefox downloading the custom font used on that page or substituting a font on your system?
It says 'remote' : https://mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff Please note that I've only used it as an example. It's not the only font I see pixelated.
Hi effgo, thanks for checking that, so the problem is not related to font substitution.
Are you able to use hardware acceleration in your Firefox? Unfortunately, Firefox is incompatible with some graphics card drivers, but if yours is compatible, that may give you smoother results. You can check the current status on the "Troubleshooting Information" page. Either:
- "3-bar" menu button > "?" > Troubleshooting Information
- (menu bar) Help > Troubleshooting Information
- type or paste about:support in the address bar and press Enter
You can scroll down to the Graphics section or search in the page for "GPU Accelerated Windows". If the numerator is more than zero, then hardware acceleration is in effect.
Thanks for bearing with me. It's GPU Accelerated Windows 1/1 Direct3D 9
I've also tried: - enabling/disabling HW acceleration - enabling/disabling 125% Windows scaling - calibrating cleartype - testing with a clear profile without addons (separate install)
An gyara
OK, I've opened the 'Adjust ClearType text' windows settings window and tried watching how fonts in Firefox change when I enable and disable it. And guess what. The blocky 'C' on mozilla website turned into a nicely rendered 'C'. Then I tried different websites only to conclude that on some websites fonts are better rendered with and some without Windows ClearType enabled. But almost always - disabling ClearType makes fonts too 'thin'. Examples: Mozilla > About : OFF http://kotaku.com/ : ON http://outlook.com/ : ON http://arstechnica.com/ : OFF
Edit: I'll file a bug report.
An gyara