Search code examples
cssfont-facegoogle-font-api

Why are my embedded fonts rendering improperly?

I am using the google fonts api, the font looks great on Google, but when I try to use it, it doesn't render properly. Here is an example:

https://twitter.com/dontdie/status/129234318299111424/photo/1

this is in Chrome, two different tabs. For some reason, Chrome is not using "subpixel rendering" ( http://en.wikipedia.org/wiki/Subpixel_rendering ) on my site, but on google it is turned on.

Solution

  • I think I figured this out. adding these rules to my stylesheet seemed to fix it:

    body, body * {
  background-color: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
}

    Just setting subpixel-antialiased didn't work, and just adding a background color to the body didn't work. This could probably be simplified to select just * or html *. Also, given that subpixel-antialiased is the default, removing that rule should work as well.