Ugly fonts on several Google sites in Firefox and Chrome

Looks like you don't have font-smoothing and ClearType turned on in which case certain fonts will look terrible.

In Windows 7 go to the Control Panel and choose View By Large Icons then choose Display->Adjust ClearType text and check Turn on ClearType. This should also enable font-smoothing.


For me this issue started when I installed the Roboto fonts from Google/Android and the issue disappeared by uninstalling these.

I guess with the Font installed it tries to use the local TrueType version which renders quite badly whereas the fonts added to the webpage through the Google Font API look way better.


The problem is the font google uses: it seem to be ugly on low dpi or without smoothing. Some good explanation: http://wellcaffeinated.net/articles/2012/01/25/font-smoothing-detection-modernizr-style/

So two solutions seem to work. 1st: https://chrome.google.com/webstore/detail/change-font-family-style/aabledekpjmoghdjnpnhfkfpmjifklpb?hl=en-US This Plugin substitutes the fonts. It works as intended all google sites are readable again.

2nd: turn on clear type. The google sites look nice but i intentionally turned clear type of - it makes all fonts blurry. i just like crisp fonts (don't have a problem to see single pixels).

Conclusion: there are fonts that are ugly without smoothing or on low-dpi (normal monitors). a website could detect (by js) if font smoothing is enabled and substitute the font if appropriate (see link above, example at the bottom with and without font smoothing).

What obviously don't work: Turn off HW-acceleration. Installing all Google fonts (i think if i wouldn't have the correct font it would be substituted by a more readable one - this is what the chrome plugin does.)