title: Why do Google's open font examples look different then when I implement them in the same browser?
body: <p>For example, take a look at <a href="http://www.google.com/webfonts/specimen/Open+Sans" rel="nofollow">http://www.google.com/webfonts/specimen/Open+Sans</a>. 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.</p>
  
  <p>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?</p>
  
  <p><strong>Edit:</strong> Here's some text that I inserted into Google's preview of the font: <a href="http://imgur.com/3eWUV" rel="nofollow">http://imgur.com/3eWUV</a>
  And the identically styled item in my own HTML page: <a href="http://imgur.com/QKNMp" rel="nofollow">http://imgur.com/QKNMp</a></p>
  
  <p>The "g", the dots in the "i"s and nearly all of the letters are rendering very poorly.</p>