CODEWITHSUNDEEP
google-chromesafarigoogle-webfonts
JamesBriggs
JamesBriggs

Reputation: 137

Open Sans Google Web Fonts Rendering in Chrome

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

Chrome

Safari/Firefox

Upvotes: 9

Views: 32505

Answers (6)

Andrey
Andrey

Reputation: 2068

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

Upvotes: 0

Lidia Panio
Lidia Panio

Reputation: 21

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.

Upvotes: 2

Andrew Swift
Andrew Swift

Reputation: 2237

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.

Upvotes: 1

yorkfx
yorkfx

Reputation: 401

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

Upvotes: 6

Parker Young
Parker Young

Reputation: 1165

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

Upvotes: 2

Aurelia
Aurelia

Reputation: 1062

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

Upvotes: -2

Related Questions