CODEWITHSUNDEEP
htmlcssfontsstyles
eugene.it
eugene.it

Reputation: 447

Fonts are not rendered properly

I have a little experience with css, and learning it day by day, but I need to figure this out.

I have a little problem with defining the styles for the page.

My page contains the following sections:

<head>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
            <header>
                <h1 class="txtName">Your pathway to success starts here</h1>
            </header>

            <p class="txtDesc">
               SomeText.................SomeText
            </p>
</article>

and I have the .css file containing the following section:

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

article p.txtDesc
{
    line-height:1.6;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    margin-left: 18px;
    font-weight: 400;          
}

The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles. It displays the right font-family, but does not recognize font-weight.

What am I doing wrong here? Need some help.

Thank you

Upvotes: 0

Views: 1621

Answers (2)

quw
quw

Reputation: 2854

Your link tag should look like

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

You need to include each of the font weights that you want in the URL.

Your styles should be:

article h1
{
    color: #0140be;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;   
}

article p.txtDesc
{
    line-height:1.6;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin-left: 18px;
    font-weight: 400;          
}

You select which font style you want with the font-weight attribute.

JSFiddle

Upvotes: 0

İbrahim Alkan
İbrahim Alkan

Reputation: 75

Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works. Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.

Upvotes: 1

Related Questions