Question

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?

Answer 1

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