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

Jaramillo

Did you already apply the Chrome fix to list SVG format first as per fontspring.com/blog/smoother-web-font-rendering-chrome ? That typically addresses a problem that's the other way around (blockier text on Chrome), but if you haven't, you should put that in place then see what the renderings look like. – Darkroom

related question #17868074 – Xerography

Answer 1

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

Boarder

Hi parker, thanks for the response. Unfortunately that doesn't seem to be working! :( Any other ideas? – Jaramillo

Hey James, unfortunately there isn't a lot of options for fixing font inconsistencies between the browsers. Webkit is notorious for bad font rendering, but in this case it's Firefox. Have you looked at similar fonts on Google Fonts (same visual style as Open Sans) that are more consistent? – Boarder

Hi Parker. Are you sure it's Firefox, since both Firefox and Safari are displaying the font the same way. It's only the rendering provided by Chrome that I like (and how it's displayed on Google fonts). – Jaramillo

I thought that Firefox was malfunctioning but now that I re-read your question, it might be Chrome displaying it wrong (in your case, right). Have you tried other fonts to see how they render? Raleway on Google Fonts might be a good alternative, it looks consistent on Safari, Chrome and Firefox on OSX: google.com/webfonts/specimen/Raleway – Boarder

This is late, but depending on how you embed the url for the font you can get a more consistent browser font. if you chop off the ":300italic,400italic,600italic,700italic,800italic,300,400,600,700,800" from the url, you get a font that looks almost identical across all browsers. – Parol

You also need to be careful of local fonts -- if you have the font installed on your system, one browser might be using the installed version and not the web font. Another issue I've had is the font names from Google are inconsistant, and so you could be asking for Open Sans, and the stylesheet says OpenSans, and so it falls back to the system font. Sorry, I've not had enough coffee today. – Heresiarch

Answer 2

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

Malacology

add this to the top of the css page: - @import url(fonts.googleapis.com/css?family=Open+Sans:400,300); – Medeiros

Answer 3

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.

Afrit

Only solution that worked for me! Using Chrome on iOS 9.3 – Pulpiteer

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.

Heresiarch

I have not seen this documented anywhere else, but you can see in the example that it is true. – Heresiarch

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

Terrorstricken

Answer 6

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

Invoke

I tried a number of font-weights but it then completely changes it in Chrome too! – Jaramillo

I'd suspect Chrome using a different format provided by Google (Google serves another one) with one of the formats built incorrectly. – Invoke