Why are my embedded fonts rendering improperly?

StackOverflow https://stackoverflow.com/questions/7906087

  •  14-02-2021
  •  | 
  •  

Question

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.

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top