Why do Google's open font examples look different then when I implement them in the same browser?

Question

For example, take a look at http://www.google.com/webfonts/specimen/Open+Sans. Inspect the type, change the font size to something smaller like 12px. Now when I implement this font on my own website (in the same browser, i.e. Firefox 10 on Windows 7) it has very poorly rendered edges. I can get the font to look better (but not really acceptable) at 11px, 13px, 15px, etc., but at the link above the font looks perfect at all of those sizes plus even sizes like 12px, 14px, etc.

I've scoured their code for some kind of "rendering intent" rule or something like that but I just don't see it. How the heck are they getting all of their fonts looking so good, even on Windows browsers?

Edit: Here's some text that I inserted into Google's preview of the font: http://imgur.com/3eWUV And the identically styled item in my own HTML page: http://imgur.com/QKNMp

The "g", the dots in the "i"s and nearly all of the letters are rendering very poorly.

Answer 1

Please check the page http://www.cs.tut.fi/~jkorpela/test/open-sans.html on your browser. It tests Open Sans in a simple environment using the coding recommended by Google. Both the black on white text and grey on white text, in 12px size, look normal on my Firefox. If they look OK to you too, then the problem is in some additional code on your page. In that case, post the code or a URL of a minimal case that still exhibits the problem as you see it.