CODEWITHSUNDEEP
htmlcssfonts
user3663890
user3663890

Reputation:

Text Font is still Bold after setting font-weight to 100

I want my font weight like heading of this website h2 element
I am using the below css i tried every thing but font-weight of h2 element on my website is still bold then this

CSS:

h2 {
 color: #2598ea;
 font: normal normal 300 38px / 51px "Open Sans", Calibri, Helvetica, Arial, Verdana, sans- serif;
 text-transform: none;
}

Really i don't know what is the problem with this code

Upvotes: 2

Views: 1592

Answers (4)

Travo100
Travo100

Reputation: 61

Back to basic here I think is more of the issue. Do you have the right font-weight loaded up from google fonts? When you select a font you like from them make sure you pick out the appropriate font weight.

If it isn't make sure you put it in your html head with the following code.

Check my code pen for how to do this.

Codepen: http://codepen.io/Travo100/pen/rdLmG

<!-- font-weight of 300 included here -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<h2> Welcome to Ardent Engineers </h2>

h2{
  color: #2598ea;
  /*font weight of 300 here*/
  font: normal normal 300 38px / 44px "Open Sans", Helvetica, Arial, Verdana, sans-serif;
  text-transform: none;
 }

Upvotes: 3

James Bruckner
James Bruckner

Reputation: 909

I think you might be confusing system fonts with web fonts. In this case, the website you linked has loaded both a normal/roman cut of the typeface as well as a bold cut. Inside a @font-face declaration you can set different weights to different files.

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-bold-webfont.eot');
    font-weight: normal;
    font-style: bold;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-roman-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

Both of these link to different files, but when a CSS rule specifies bold, the first declaration is used. When normal is specified, the second is used.

In your example, you need to use the light cut of the font to achieve a lighter font.

Upvotes: 0

Ajay2707
Ajay2707

Reputation: 5798

Add properties of normal class with !important. So it always apply.

CSS: 
h2
{
    color: #2598ea;
    font: normal normal 300 38px / 51px "Open Sans", Calibri, Helvetica, Arial, Verdana,    sans-serif;text-transform: none; 
    font-weight : normal !important ;
}

But I think you can add new class for normal font and explicitly given to the object.

<h2 class="normalfnt" ...>
    .normalfnt
    {
            font-weight : normal !important ;  
    }

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

That is not system font. The font itself, it is coming up with the style. Basically our system font will come up very boldly, if you give 38px. In your case it is taking the system font and it is applying as it is. If you give Bold it will add more bold to the normal text.

Suppose if you installed the same font "Open Sans" in your system, you will get the same result.

Upvotes: 0

Related Questions