CSS font-weight Property

The font-weight property is used to set the boldness and thickness of the font. But there are some fonts that do not set all weights. They are only available on normal or bold.

Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version CSS3
DOM Syntax object.style.fontWeight = "bolder";

Syntax

font-weight: normal | bold | bolder | lighter | number | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
      font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

See another example with the all values.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
      font-weight: normal;
      }
      p.lighter {
      font-weight: lighter;
      }
      p.bold{
      font-weight: bold;
      }
      p.bolder {
      font-weight: bolder;
      }
      p.fweight {
      font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Values

Value Description
normal Means that text characters will be normal. This is the default value of this property.
bold Defines thick characters.
bolder Defines thicker characters in the text.
lighter Defines lighter characters.
100
200
300
400
500
600
700
800
900
We can use these values to set text characters from thin to bold. 400 is same weight normal, while 700 makes the characters same with bold.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

2.0+ 12.0+ 1.0+ 1.3+ 3.5+

Practice Your Knowledge

Which value is nor correct for the font-weight property?




Related articles