0

I am trying to make a text thinner and i have seen it working properly on a website. http://www.freshthemes.net/demo/backbone/about-us/ (Under company overview)

This is the style I am using:

.intro p{
    text-align: justify;
    margin-bottom: 8px;
    line-height: 22px;
    margin-bottom: 8px;
    font: 17px/21px "Open Sans", Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    color:#656565;
}

And the font is loaded with:

<link rel='stylesheet' id='google_webfont_OpenSans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans' type='text/css' media='all' />

The thing, font-weight property seems not to have any effect. It doesn't mind if I set it to 300 or not. (and it shouldn't, on the previous site its working)

This is my body:

<div class="intro">
    <p>
        This is the text that should be thinner
    </p>
</div>

What am I missing?

Alvaro
  • 40,778
  • 30
  • 164
  • 336

2 Answers2

10

You are not loading every font-weights. You should try something like that : 

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

You can customize it to your need on this google page by checkig all fonts that you need (but watch out for site speed if you load too much fonts !): http://www.google.com/webfonts#UsePlace:use/Collection:Open+Sans

Jean
  • 762
  • 5
  • 12
  • 3
    You're also not using the loaded font in your CSS. I don't see Open Sans anywhere in there. – Luke Jakimowicz Nov 13 '12 at 11:42
  • Yes, your right ! Use your font with *font-family: 'Open Sans', sans-serif;* in your .intro p declaration. – Jean Nov 13 '12 at 11:44
  • Thanks, that was a paste mistake :) – Alvaro Nov 13 '12 at 11:46
  • Anyway, why is it working on the site i posted if they are not loading this font-weights? – Alvaro Nov 13 '12 at 11:48
  • Firebug is showing that they also load that css : *http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700* – Jean Nov 13 '12 at 11:59
1

In order to use different weights of a web-font, you must include it in your <link>, by adding your weights to the end of the font's name like so:

<link rel='stylesheet' id='google_webfont_OpenSans-css' ref='http://fonts.googleapis.com/css?family=Open+Sans:400,300' type='text/css' media='all' />

while each such addition will make your page load heavier, be weary of loading too many fonts with too many font-weights

Rodik
  • 4,054
  • 26
  • 49
  • Yeah, that's it. Thanks. But... why on the original page I posted they dont load it with them and it still working? – Alvaro Nov 13 '12 at 11:45