0

I have done a lot of looking into this problem on my own and I know that this is a common problem with a lot of people, but many usually find a solution to their problem, however I cannot.

I'm currently using this font: http://fonts.googleapis.com/css?family=Questrial

And It renders perfectly on Windows 7 Firefox, Chrome, and IE. However, on Safari, the font weight is overly bold.

See comparison below:

Firefox vs Safari

Now this example is a major problem for the h6 tag:

h6 {
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
  font-family: Questrial;
  -webkit-font-smoothing: antialiased; //This does nothing to help
  margin-bottom: 10px
}

So is there even a fix?

sl133
  • 1,339
  • 2
  • 15
  • 28
  • It might be an order issue [as described here](http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac/9041280#9041280) – robertklep Jan 10 '13 at 21:36
  • I don't have the font, I'm taking it directly from google: – sl133 Jan 10 '13 at 21:42
  • Agreed :-) However, it's just a regular CSS file which you can save and test with. Also, have you tried `subpixel-antialiased` instead of `antialiased`? – robertklep Jan 10 '13 at 21:49
  • Ah never mind, Google always seems to return just a .woff :( – robertklep Jan 10 '13 at 21:53
  • Subpixel still does not fix the problem – sl133 Jan 10 '13 at 22:23
  • Perhaps [this](http://stackoverflow.com/a/5082824) is useful (although it also states that different browsers render fonts differently and there's sadly only so much you can do about it). – robertklep Jan 10 '13 at 22:38
  • Yeah I've tried that already. I'm thinking I may have to end up switching to a non Google font sadly, or just forget about Safari users. – sl133 Jan 10 '13 at 22:50

0 Answers0