11

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?

Improve this question
6
  • 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, 2013 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, 2013 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, 2013 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, 2013 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, 2013 at 9:31

6 Answers 6

Reset to default
3

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.

Improve this answer
6
  • 2
    clear type makes all other fonts ugly - so this is no real solution. only google sites have this problem.
    – dermoritz
    Jun 26, 2013 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 P
    Jun 26, 2013 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, 2013 at 15:16
  • James is ABSOLUTELY RIGHT. The problem may be exacerbated by not having your screen resolution set appropriately.
    – Joshua
    Jun 26, 2013 at 15:39
  • 1
    That is actually an image not text so it will not have the same problem. I don't mean to keep going on about ClearType but I should point out that it can be heavily customised so that it barely affects most fonts but still has a positive effect on the ones that need it most.
    – James P
    Jun 27, 2013 at 9:21
3

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.

Improve this answer
1
  • I didn't remember I had just installed the Roboto font late last week until I read your answer. This is why the font is rendering so badly in my case as well. Thank you.
    – JohnDubya
    Feb 2, 2015 at 21:41
2

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

Improve this answer
1
0

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
Improve this answer
1
  • that didn't helped
    – dermoritz
    Jun 26, 2013 at 14:54
0

I used to have the same problem with Google fonts (specially Google Spreadsheets) using Firefox. What it worked for me was the next:

  1. Open in Firefox the document or URL that is displaying "ugly fonts". Make sure to open a Firefox window on each monitor/screen that you have available. In my case I have the display of my laptop and 2 external monitors.
  2. Open the link Refresh Firefox
  3. Click on the button "Refresh Firefox".
  4. In the popup window, confirm clicking the button "Refresh Firefox".
  5. Your Firefox configuration and addons will be reset to default, don't worry techie guys: All your bookmarks and passwords will be saved.
  6. Wait until Firefox closes itself and gets open again.
  7. Once The Firefox is refreshed you are good to go, check again the page with ugly fonts and the problem should be gone.

Other option insteas the link showed in the step #2 is go to url about:support. The button "Refresh button" is on the up right corner.

Improve this answer
-1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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