Font Family Open Sans not being used

20
votes

I am using Google's Open Sans Font in my application.

I have defined the stylesheet as instructed:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
 rel='stylesheet' type='text/css'>

I then used it on the body selector as: 

body {
    font-family: 'Open Sans', sans-serif;
}

I have not defined font family anywhere else. I assume that since I have defined it at the parent, the child elements will automatically inherit it.

However, if I open up the inspector for say an anchor tag in my application and see the computed styles for that tag, I find that (Chrome Latest) the "Rendered Font" says "Times New Roman 18 glyphs" - Is this correct? I was expecting it to say "Open Sans" - Is the Open Sans font not being applied?

1
cssfontsfont-family
do you have a JSFiddle? – smistry
Cannot reproduce. Does the text look like Open Sans? It should be clearly distinguishable from Times New Roman. “Rendered Font” info in Chrome can be bogus for web fonts. – Jukka K. Korpela
@JukkaK.Korpela Please see the answer - apparently its some kind of bug with chrome (because I don't have the issue with Firefox) – callmekatootie

1 Answers

11
votes

Check out the codepen link. Its working fine for me !

.open-sans-font{
  font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

<div class="open-sans-font">
   Stackoverflow rocks !!!
</div>