2

I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.

This is a .css sections defining my fonts:

 .txtName
 {
     margin-left: 18px;
     font-size: 20px;
     color: #0140be;
     font-family: 'Open Sans Light' !important;
     font-weight:normal;
     line-height: 1.4em;   
 }

This is the part of html file that need to be displayed the same on IE, Chrome and FF:

<div class="txtName-Main">
     <h1 class="txtName">Your pathway to success starts here</h1>
</div>

What can be the problem?

Thx

eugene.it
  • 417
  • 3
  • 13
  • 32

4 Answers4

5

'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:

In the head of your document:

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

In your CSS:

font-family: 'Open Sans', sans-serif;
font-weight: 300;
NallyRoll
  • 370
  • 1
  • 8
  • 20
  • That works, as well. Thx. But I also have another section in my code that need to use `'Open Sans', Arial, sans-serif` with `font-weight:400` and that does not work – eugene.it Aug 27 '14 at 18:49
  • 1
    with Google Fonts, you can load several fonts into the one URL: "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300". Then, all you need to do is change the font-weight, font-style properties, etc.https://www.google.com/fonts#QuickUsePlace:quickUse – NallyRoll Aug 27 '14 at 19:20
  • The problem was solved with that approach. However, when I copied the code into some network location, Chrome and FF show styles, but IE does not. Do you have any suggestions? – eugene.it Aug 27 '14 at 20:39
  • Is that possible to achieve all these without referring to googleapis? – eugene.it Aug 27 '14 at 20:47
  • From https://developers.google.com/fonts/faq : "Can I download the fonts on Google Fonts to my own computer? Yes. To download the fonts, simply add fonts to your collection and click the "Download your Collection" link. You can download the fonts to use them for your mockups, in your documents or to host them on your own server." – NallyRoll Aug 27 '14 at 21:32
0

I see a few suggestions, But what worked for me is loading my fonts with: 

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

and in .css I had to use the following definition:

color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;

So, instead of having:

font-family: 'Open Sans Light'

I used

font-family: 'Open Sans';
font-style: Light;

and it worked

eugene.it
  • 417
  • 3
  • 13
  • 32
0

it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:

font-family: open sans condensed light, open sans condensed;

i used it for assigning fonts to different divs. cheers, hope this helps.

Alex
  • 11
0
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">

Goes in the <head> element and downloads light and regular fonts

In css style: ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{ font-family:'Open Sans', sans-serif; font-weight: 300; font-style: normal; sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)

avprod1
  • 1