Open Sans Google Web Fonts Rendering in Chrome

Question

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!!

Answer 1

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;
}

Answer 2

You apparently didn't reset the default browser CSS, try setting font-weight explicitly.

Answer 3

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 :)

Answer 4

There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:

example at tech.Ozake.com

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.

Answer 5

This workaround helped me to make Open Sans to look very close in different browsers.

<script>
function loadCss(path){
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", path);

    document.getElementsByTagName("head")[0].appendChild(fileref);
}

if (ViewUtil.isChromeBrowser()) {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}

we are forcing a bit 'bolder' version of font for chrome

Answer 6

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.