Categories: Report an Issue :

Font rendering is horrendous using Google-supplied Web Fonts (Windows)

Showing 1-29 of 29 messages
Font rendering is horrendous using Google-supplied Web Fonts (Windows) nathanziarek 8/8/11 6:09 AM
Google Chrome version (type about:version into the address bar): 12-14
Operating System: Windows 7
Error Message: None
Extensions installed: None
Please describe your question/comment in detail (for example, steps to reproduce the problem):

The font rendering on Google Chrome is unusably-off on Windows machines. Chrome seems to completely ignore any anti-aliasing or font-smoothing settings. I've tested on Chrome 12 & 14 on a Windows 7 machine as well as through Adobe Browser lab, with Windows and Chrome 11 & 13.

Italicized fonts and most decorative fonts seem to have this problem.

Test page: http://org.asq.uxl.s3.amazonaws.com/font.html

Other browsers on Windows 7 look fine. Chrome on Mac OS X looks great as well.

I've tried adjusting all settings in ClearType, and have even added the -webkit-font-smoothing styles to the stylesheet of a site I'm working on. I see no difference in Chrome (although Safari does change with those directives).

Thoughts?

Best,
Nathan
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) DavidG 8/12/11 7:53 AM
I have no answer for you unfortunately, but wanted to confirm that I'm experiencing the same exact thing. If you find a fix, please do post it back here. I will do the same.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) hrobinett 8/12/11 1:02 PM
I am experiencing the same problem! Very frustrating.

Is there a fix to this?
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Epic Revolt 8/12/11 3:38 PM
Chrome does not initially render fonts the same ways other major browsers do. to fix this problem on YOUR website add a text-shadow to the text and Chrome will magically render it perfectly. Don't ask me why or how this works, it just does. As for other websites, you're screwed until Google can get their act together and follow font standards that other browsers have come to know and use.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) nathanziarek 8/15/11 1:50 PM
@Epic—

I can't tell you how many times I tried that trick to no avail. Then, thinking I was making drop shadows incorrectly, I copied and pasted some code of another site and it worked...

I started playing with the values to understand why my current text—which uses drop shadows to achieve that "carved-in" effect—wasn't properly smoothed. Turns out, the drop shadow has to have a non-zero blur attribute. "text-shadow: 0px 1px 0px white" will not smooth the type, but "text-shadow: 0px 1px 1px white" will.

Better yet, specifying a negative blur keeps the sharp carved-in effect *and* smooths the type.

http://org.asq.uxl.s3.amazonaws.com/font.html

Thanks for bringing this up!

nz
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) nathanziarek 8/15/11 2:15 PM
hmm. Of course, FireFox just ignores any shadow with a negative blur. No perfect answer, I suppose, but I much prefer having Chrome look reasonable and FireFox to miss the drop shadow, all things being equal.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Jamyweb 8/21/11 5:02 AM
Hi Guys!

First a BIG THANKS to Epic for his great help/solution.
I also found that my Google font (Yanone Kaffeesatz) did not display well in Chrome although I had no problem with IE8-9 and Firefox 5.
I use the latest Chrome v13.0.782.112 but it does look ugly (blurred, letters touching each other, etc...)

By the way THANKS to you too Nathanziarek as you are right in mentioning the fact that you need specific values otherwise it doesn't work.

Hopefully I got now a better rendering (no more blurred)  but it is still far from the rendering quality I have in Firefox and IE (letters are much too thin in Chrome)

What is weird is that it doesn't seem to be a new problem at all. Hope the big guys there can do something about it...

THANKS to you all !
Jamy

PS: similar thread here: http://www.google.is/support/forum/p/Chrome/thread?tid=2825e60dfc6a7ef0&hl=en&fid=2825e60dfc6a7ef00004ab028676c57b
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) JanDeVries 8/23/11 6:45 AM
Based on Epic Revolt's answer, I came up with a workaround that applies an invisible text-shadow to all websites. It hinges on the user stylesheet feature that all major browsers support, which allows you to supply a default style for all content displayed by the browser.

Put the following text in %APPDATA%\..\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

body {
   text-shadow: 0px 0px 1px rgba(128,128,128,0.01);
}

The color of the shadow does not matter, since the alpha value of 0.01 makes it practically invisible.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Jamyweb 8/23/11 7:17 AM
Hi!

Thanks Jan for your great tip!

I also found that the problem came when the web page I was watching used a Google font already installed on my local computer (C:/Windows/Fonts)
After I removed the concerned font from my local computer, pages looked perfect in any version of Chrome.
Very interesting bug in Chrome, hey big guys, go back to work! :-)

So if you're developing pages that call some specific Google fonts, do NOT duplicate them in your local fonts folder and all will be fine.
This solution has been successfully tested in Windows and Mac environments.

Cheers!
Jamy

Cheers!
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) gwhiz2k 10/26/11 1:23 PM
I've been fighting with this for a few days now... I've tried testing on a machine I didn't have my Web font installed on; tried the text-shadow trick, and also tried the CSS3 Transform rotate trick I read about elsewhere. Nothing is working. The rotate fix had things working, until Chrome updated itself to version 15, now nothing works at all.

Anyone else find this happening with Chrome 15?
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) raylu 11/9/11 12:05 AM
I'm in a similar situtation. text-shadow and font-smoothing seem to no longer have any effect on Windows and Chrome 15.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Different55 11/29/11 7:36 AM
Can you apply a style sheet to every page in chrome? I know they have it in opera, but that doesn't do much good here. ;) If you can you can just whip up a quick, small style sheet that applies a text-shadow to everything and fix your font problem.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) williamjeaton 12/20/11 7:44 AM
Spotted the same thing. The text-shadow: 0px -1px 1px #fff; used to work for me but I have noticed that it has now stopped working!!! GOOGLE - HELP - your own browser doesn't render your own webfonts!!!!
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) mistame 12/28/11 3:02 PM
I'm getting really tired of this issue, it's been what, 3 or 4 updates, maybe more, and this still is an issue?. I don't think I'll be able to recommend chrome any longer, they've taken away gtalk labs, and haven't gotten on the ball with this. It's becoming more clear that they aren't actually 'listening' to the community. There HAS to be someone within google that's experienced this by now!!!!
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Aaron Martin-Colby 2/2/12 10:51 PM
These font rendering issues are murder. It's giving me Netscape/IE flashbacks from 1998.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) SoCalWebGuy 2/13/12 4:24 PM
Something is screwed.  Sites look fine in IE but terrible in Chrome.

I guess I must switch to IE, which disappoints me no end.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) pcastaneda 2/14/12 11:58 AM
I am having the same problem after I upgraded to Chrome Beta the other day.  I literally can not read the fonts on websites.  I've tried changing encoding, tried to modify the default font in Chrome, but simply can not get chrome beta to work.  Any insights or help would be appreciated.  For now reverting back to previous version of Chrome.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) techouse 3/11/12 1:45 AM
The text-shadow hack doesn't work anymore in Chrome 16+ :/
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Andrew Kehrig 3/20/12 11:21 AM
/*the following does the trick for me*/
-webkit-text-stroke: 1px transparent;
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) snowfoil 3/21/12 6:09 AM
This fix is not working on my site unfortunately (in Chrome 17).

I can't believe Google's own browser cannot render their web fonts properly. How are we supposed to use them on a website if 25% of users (according to Chrome market share) are going to see awful looking jagged text?

Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Andrew Kehrig 3/21/12 11:44 AM
It is terribly unfortunate, though currently the -webkit-text-stroke: 1px transparent; does work for me on chrome 17. Do you have cleartype enabled or possibly some other css overriding the -webkit-text-stroke? This is pretty much strictly a Windows Chrome/Chromium issue if I'm not mistaken.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) code7 4/22/12 2:29 AM
Having the same issue, can see the problem in the font test you have posted as well as on sites we have built. The CSS ideas and cleartype settings etc dont help. Lost of posts all over the place about it and no solutions? Nothing at all from Google, seems strange that Google's Web Fonts will not work properly in Google's browser, have asked TypeKit if they can shed any light and will post back, be nice to hear from Google (or Microsoft?) on this one
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Zombiestxt 4/27/12 6:57 PM
Maybe Google is working on conditional comments for Chrome to offer users the ability to view the page in a different browser!? :p  
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) Brad Shaw 5/28/12 3:49 PM
Clear Type is enabled by default in Window 7.
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) aldrinlsc 6/16/12 10:00 AM
Same issue happened to me, other browsers can render it properly except Chrome, version 19+. -webkit-font-smoothing doesn't seem to work anymore, same thing with the text shadow but i found another way to fix this issue:

If you're using a numeric value to the font-weight say "font-weight: 700"
just change it to "bold" instead and you're all good.

Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) GoTarik 7/10/12 3:26 AM
Hey Jamy,

I was confused about the bug with the local installed font and the Google font api. But that's true.
I am using the webfont for some details in graphic tools. And if I update the webpage the Google font api used font is not shown clearly. But if I delete this font from my local computer like windows/fonts/, then firefox and ie display the font clear and bright :)
Just Opera has not got this problem!

Thanks and bye
Tarik

Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) googlehupf 9/4/12 6:02 AM
I don't see any progress going on with this issue.
My page looks crap. The issue is in the tracker for
a long time now: https://code.google.com/p/chromium/issues/detail?id=137692
But no reaction from the developers...
Re: Font rendering is horrendous using Google-supplied Web Fonts (Windows) tushbee 9/17/12 11:33 AM
SOLUTION:

im not a google rep or anything, just found a work around solution that seems to be working well for me.

I downloaded the font and all its forms (woff, ttf, svg etc.) from fontsquirrel (i think most google web fonts can be downloaded there), then I copied the @font-face declarations  that it generated in its font-face kit and pasted each into my main css file. I then uploaded the font files to my sites root folder.

I then declared each font variant as i needed with the "font-family:" attribute, and all is well across all browsers.

This may slow down your site load speed, but if you MUST use a certain font, i think this is the best method.

I think that chrome requires the SVG version of the font to display it correctly, at least thats what it seems like.

Please let me know if this helps your efforts.

Thanks,

Tushbee

svguyui 12/6/12 6:21 PM <This message has been deleted.>
More topics »