CODEWITHSUNDEEP
cssfont-facewebfonts
Alvaro
Alvaro

Reputation: 41595

font-weight over a font-face not working?

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?

Upvotes: 0

Views: 4897

Answers (2)

Rodik
Rodik

Reputation: 4092

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

Upvotes: 1

Jean
Jean

Reputation: 772

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

Upvotes: 10

Related Questions