CSS - font-weight Property

Quiz

CSS font-weight property alters the visual weight of characters in an element. Font weight refers to the thickness or boldness of the characters.

Syntax

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

Property Values

Value	Description
normal	It defines normal font weight.
bold	It defines bold font weight.
bolder	It defines bolder font weight.
lighter	It defines lighter font weight.
number (100-900)	The font weight is defined in numbers from thin to thick. 400 is equivalent to normal, 700 is equivalent to bold.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Weight Property

The following examples explain the font-weight property with different values.

Font Weight Property with Normal Value

To apply a normal font weight to the text, we use the normal value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: normal;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: normal
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

Font Weight Property with Bold Value

To apply a bold font weight to the text, we use the bold value. The characters appear much thicker than with the normal value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: bold
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

Font Weight Property with Bolder Value

To apply a bolder font weight to the text, we use the bolder value. The characters with this value appear much thicker than with the bold value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: bolder;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: bolder
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

Font Weight Property with Lighter Value

To apply a lighter font weight to the text, we use the lighter value. The characters appear light. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: lighter;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: lighter
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

Font Weight Property with Numeric Values

The font weight of the text can also be provided in numeric values. The values could be from 100 to 900, these repersent the increasing order of thickeness. Some values have been used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    #first {
      font-weight: 500;
    }
    #second{
      font-weight: 700;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: 500
  </h4>
  <p id="first">
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
  <h4>
    font-weight: 700
  </h4>
  <p id="second">
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

Supported Browsers

Property
font-weight	2.0	4.0	1.0	1.3	3.5

css_reference.htm

Print Page