Open Sans Google Web Fonts Rendering in Chrome

google-chrome safari google-webfonts
JamesBriggs picture JamesBriggs · Oct 29, 2012 · Viewed 30.2k times · Source

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

Answer

yorkfx picture yorkfx · Apr 3, 2013

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

Related questions

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

I am creating a jQuery plugin. How do I get the real image width and height with Javascript in Safari? The following works with Firefox 3, IE7 and Opera 9: var pic = $("img") // need to remove these in of case img-element has …

Read More
Video auto play is not working in Safari and Chrome desktop browser

I spent quite a lot of time trying to figure out why video embedded like here: <video height="256" loop autoplay muted controls id="vid"> <source type="video/mp4" src="video_file.mp4"></source> <…

Read More
How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More