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 CSS1
DOM Syntax object.style.fontWeight = "bolder";

Syntax

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

Example of the font-weight property:

<!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>

Result

CSS font-weight Property

Example of the font-weight property with all the values:

<!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 Play it
normal Means that text characters will be normal. This is the default value of this property. Play it »
bold Defines thick characters. Play it »
bolder Defines thicker characters in the text. Play it »
lighter Defines lighter characters. Play it »
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. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 1.3+ 3.5+

Practice Your Knowledge

What properties does the CSS 'font-weight' property specify?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?