I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.
来源：https://stackoverflow.com/questions/13114417/open-sans-google-web-fonts-rendering-in-chrome