Why does Google open font examples look different than when I implement them in the same browser?
For example, see http://www.google.com/webfonts/specimen/Open+Sans . Inspect the type, change the font size to a smaller one like 12px. Now when I implement this font in my own website (in the same browser, i.e. Firefox 10 on Windows 7) it has very poorly rendered edges. I can make the font look better (but not very acceptable) at 11px, 13px, 15px, etc., but from the link above, the font looks perfect at all those sizes plus even sizes like 12px, 14px, etc.
I've looked at their code for some sort of "render intent" rule or something, but I just can't see it. How the hell do they get all their fonts so good, even in Windows browsers?
Edit: Here is the text I entered into the Google font preview: http://imgur.com/3eWUV And an identically styled element in my own HTML page: http://imgur.com/QKNMp
"g", dots in "i" and almost all letters are very poorly displayed.
source to share
Please check the page http://www.cs.tut.fi/~jkorpela/test/open-sans.html in your browser. It tests Open Sans in a simple environment using google recommended encoding. Both black on white and gray on white 12px text look fine on my Firefox. If they look good too, then the problem is some extra code on your page. In that case, please post the code or URL of the minimal case that still detects the problem as you see it.
source to share