Open In App

CSS font-weight Property

Improve
Improve
Like Article
Like
Save
Share
Report

The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on font-family used and the browser. For instance, some font-family is available only in specific weights.

Syntax:

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

Property Values:

  • normal: This is the default font-weight & defines the normal font-weight. It is equal to the number value 400.
  • bold: This defines the bold font-weight, it is equal to the number value 700.
  • lighter: This makes the font-weight one level lighter than the parent element, considering the available font weights of the font family.
  • bolder: This makes the font-weight one level heavier than the parent element, considering the available font weights of the font family.
  • number: This sets the font-weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.

Global Values:

  • initial: This sets the font-weight to the initial(default) value.
  • inherit: This sets the font-weight equal to the value inherited from its parent element.
  • unset: This sets the font-weight equal to the value inherited from its parent element since font-weight is an inheritable property.

When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.

Parent Value

lighter

bolder

100

100

400

200

100

400

300

100

400

400

100

700

500

100

700

600

400

900

700

400

900

800

700

900

900

700

900

Example: The following example demonstrates the use of CSS font-weight property in which the property has been set to different values.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> font-weight property </title>
    <!-- font-weight CSS property -->
    <style>
    body {
        font-weight: bold;
        font-family: sans-serif;
    }
      
    p.one {
        font-weight: bold;
    }
      
    p.two {
        font-weight: lighter;
    }
      
    p.three {
        font-weight: 1000;
    }
      
    p.four {
        font-weight: initial;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>CSS font-weight Property</h3>
    
    <!-- font-weight: bold; length; property -->
    <p class="one"
       Prepare for the Recruitment drive of product based 
       companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. 
      The course focuses on various MCQ's & Coding 
      question likely to be asked in the interviews 
      & make your upcoming placement season efficient 
      and successful. 
    </p>
  
    
    <!-- font-weight: lighter; length; property -->
    <p class="two"
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. The course 
      focuses on various MCQ's & Coding question likely to
      be asked in the interviews & make your upcoming 
      placement season efficient and successful. 
    </p>
  
    
    <!-- font-weight: 1000; length; property -->
    <p class="three"
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with 
      a free online placement preparation course. The 
      course focuses on various MCQ's & Coding question 
      likely to be asked in the interviews & make your 
      upcoming placement season efficient and successful. 
    </p>
  
    
    <!-- font-weight: initial; length; property -->
    <p class="four"
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. The course 
      focuses on various MCQ's & Coding question likely to 
      be asked in the interviews & make your upcoming 
      placement season efficient and successful. 
    </p>
  
</body>
</html>


Output:

Supported Browsers: The browser supported by CSS font-weight Property are listed below:

  • Google Chrome 2.0
  • Internet Explorer 3.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


Last Updated : 11 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads