1

I am using Google's Open Sans Font on my website.
Firefox and Chrome display the font in the right way, but Safari is not.
I tried all -webkit-font-smoothingoptions out, but it seems that is only fix it on OS X.

4-Images -> On the top side of the image is my own website

<select class="Open-Sans-normal-400">
   <option>EUW</option>
</select>

and on the bottom side the same font, but on Googles Font Website

If you need more informations, just tell me. I'll add them.

Thanks for helping.

ThaFlaxx
  • 71
  • 7

2 Answers2

0

This might help:

* {
  text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

Source: Same font except its weight seems different on different browsers

Community
  • 1
  • 1
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • Your code or your source did not help me, to get the font in safari look like the normal 400 weight. :/ – ThaFlaxx Jun 12 '16 at 23:36
  • Did you consider that it is not a lighter font but a lighter rendering due to the fact that you use it on a dark background? Can you test this by changing the colors to black on white? – Mr. Hugo Jun 12 '16 at 23:41
  • White on Black AND Black on White does look like its lighted as hell. But when I use `_::-moz-svg-foreign-content, :root body {-webkit-text-stroke: 0.5px;}` it looks like it should, but this is not a good solution. – ThaFlaxx Jun 12 '16 at 23:53
0

I just found a fix for this which worked for me with Safari on IOS and Macs.

When browsers cant find a bold version, they try to copy it which may vary in the rendering result.

You can try to disable it by adding: this CSS:

font-synthesis: none

Otherwise you can try setting the font-weight manually ie.

font-weight: 400
Josh
  • 847
  • 9
  • 17