Skip to content
Related Articles

Related Articles

CSS | font-weight Property
  • Difficulty Level : Medium
  • Last Updated : 16 Oct, 2019
GeeksforGeeks - Summer Carnival Banner

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 example, some font-family are available only in specific weights.

Syntax:

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

Keyword Values:

  • normal: This defines the normal font weight (default 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.

Relative Keyword Values:

  • 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.

Numeric Values:



  • 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, suitable weight is applied.

Global Values:

  • initial: This sets the font weight to 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 a inheritable property.

Example:




<!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>
    <!-- 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:
CSS Property: font-weight

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

  • Google Chrome 2.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Safari 1.3
  • Opera 3.5

Reference: Mozilla Developer Network (MDN)

Please comment below, if you found any errors, or have suggestions for improvements.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :