Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Family Open Sans not being used

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?

like image 397
callmekatootie Avatar asked Apr 07 '14 09:04

callmekatootie


People also ask

Is Open Sans a popular font?

It ranks among the most popular Google Fonts with more than 1.5 trillion views in one year. Countless websites use it, including big brands like: IKEA (actually it's Noto Sans, but they are almost the same), Chase Bank and WordPress (on the website until it's 2020 redesign and switch to Recoleta).

How do you use Open Sans font family?

Example: How to add the Open Sans font in CSS The font will be downloaded and processed in parallel with your own stylesheet. Alternatively, you can use a CSS @import : @import url('https://fonts.googleapis.com/css?family=Open+Sans');

Who Uses Open Sans font?

Open Sans is popular in flat design-style web design. Open Sans is used in some of Google's web pages as well as its print and web advertisements. It is the official font of the UK's Labour, Co-operative, and Liberal Democrat parties. Used in WordPress 3.8 which was released on December 12, 2013.

Is Open Sans for commercial use?

License InformationYou can use Open Sans freely in your products & projects – print or digital, commercial, or otherwise. However, you can't sell the font.


1 Answers

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>
like image 161
Aalind Sharma Avatar answered Oct 19 '22 13:10

Aalind Sharma