Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

On several Google sites the fonts are rendered ugly in Firefox and Google Chrome under Windows 7 and 8:

ugly fonts used on google dev site

I turned off Clear Type because most of the fonts are ugly with it.

Firefox and Chrome have the problem. If the problem is caused by a missing font the font should be substituted by another font, shouldn't it? In which case I would then need to find out what the missing font is and go download it.

In the meantime I installed all Google fonts from https://github.com/w0ng/googlefontdirectory but this didn't help. Either the Google sites with ugly fonts don't use one of these fonts or this ugly font is always ugly without smoothing or high DPI.

Is there any way to fix this?

share|improve this question
    
Verify the fonts used by the website are installed on your system. More information about your system is required. What version of Windows7 and 8 exactly are you using, what language packs do you have installed, that sort of stuff. Possible Duplicate: superuser.com/questions/59697/… –  Ramhound Jun 26 '13 at 14:26
    
@Ramhound: is there any difference in included fonts between different windows 8 versions? But for some odd reason it helps you: Both are fully patched "pro" versions. –  dermoritz Jun 26 '13 at 15:01
    
Have you verified you have the required fonts? The question I linked to indicated the font your likely missing. –  Ramhound Jun 26 '13 at 15:06
    
how to do this? how to get the fon required for a given website and where to download it? why are those font not substituted by the fonts set in settings (times new roman for serif, arial for sans serif)? –  dermoritz Jun 26 '13 at 15:09
    
If it’s Google sites, then it’s likely your browser has a problem displaying webfonts (linked fonts). Is it a case where your fonts look sharp if they happen to be those installed on your machine, and they look pixellated if they are linked from the web page? I know with Firefox on Windows, I have this very issue—type always looks better on Firefox on Mac. –  Jack Yan Nov 26 '13 at 9:31

5 Answers 5

up vote 3 down vote accepted

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.

share|improve this answer
    
clear type makes all other fonts ugly - so this is no real solution. only google sites have this problem. –  dermoritz Jun 26 '13 at 15:02
    
There are two levels - font-smoothing (sevenforums.com/tutorials/…) which is pixel-level anti-aliasing and ClearType which affects monitor subpixels. Have you disabled both or just ClearType? Also, are you sure you are running your monitor at the correct resolution? It seems strange that you find ClearType rendering "ugly" as it is meant to improve the appearance of text. –  James Jun 26 '13 at 15:05
    
i am sure about resoultion. and i disable all kinds of smoothing - to get all fonts clean. in meantime i found that: plus.google.com/+SethLadd/posts/ByN5ELN9vEy at the end there is a link: chrome.google.com/webstore/detail/change-font-family-style/… that solved the problem in chrome! –  dermoritz Jun 26 '13 at 15:16
    
James is ABSOLUTELY RIGHT. The problem may be exacerbated by not having your screen resolution set appropriately. –  Joshua Jun 26 '13 at 15:39
    
look at the upper left corner of my screenshot (the link!). the button (text or bitmap) is displayed absolutly fine. Only the odd font google uses on some sites is ugly. –  dermoritz Jun 27 '13 at 8:25

From a Mozilla support question:

Try to disable hardware acceleration in Firefox.

Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"

https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes 

https://hacks.mozilla.org/2010/09/hardware-acceleration/ 

Try to set the gfx.content.azure.enabled pref to false or if this didn't help disable Direct2D by setting the gfx.direct2d.disabled pref to true on the about:config page and leave hardware acceleration otherwise enabled.

http://kb.mozillazine.org/about:config 
share|improve this answer
    
that didn't helped –  dermoritz Jun 26 '13 at 14:54

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.)

share|improve this answer

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.

share|improve this answer

I'm use this in Firefox to block web fonts at whole but except some sites (such as github)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.