CSS Solid

☰

Font Weight

Font weight property sets weight (thickness / thinness) of the font.

Note: Font weight 400 is equal to normal and font weight 700 is equal to bold.

Font Weight Example Output
normal 
.weightNormal
{
  font-weight:normal;
}
bold 
.weightBold
{
  font-weight:bold;
}
bolder 
.weightBolder
{
  font-weight:bolder;
}
100 
.weight100
{
  font-weight:100;
}
200 
.weight200
{
 font-weight:200;
}
300 
.weight300
{
  font-weight:300;
}
400 
.weight400
{
  font-weight:400;
}
500 
.weight500
{
  font-weight:500;
}
600 
.weight600
{
  font-weight:600;
}
700 
.weight700
{
  font-weight:700;
}
800 
.weight800
{
  font-weight:800;
}
900 
.weight900
{
  font-weight:900;
}
 
<body>
    <div class="weightNormal">font-weight:normal - Font weight: normal </div>
    <div class="weightBold">font-weight:bold - Font weight: bold </div>
    <div class="weightBolder">font-weight:bolder - Font weight: bolder </div>
    <div class="weight100">font-weight:100 - Font weight:100  </div>
    <div class="weight200">font-weight:200 - Font weight:200  </div>
    <div class="weight300">font-weight:300 - Font weight:300 </div>
    <div class="weight400">font-weight:400 - Font weight:400 </div>
    <div class="weight500">font-weight:500 - Font weight:500  </div>
    <div class="weight600">font-weight:600 - Font weight:600  </div>
    <div class="weight700">font-weight:700 - Font weight:700  </div>
    <div class="weight800">font-weight:800 - Font weight:800  </div>
    <div class="weight900">font-weight:900 - Font weight:900  </div>
</body>

Example: Set font weight on default font family. 


<!DOCTYPE HTML>
<html>
<head>
    <title> CSS Font Weight</title>
     <style type="text/css">

         .div1 {
             font-weight:200;
             padding:15px;
         }
         .div2 {
             font-weight:900;
             padding:15px;
         }
     </style>
</head>
<body>
     <div class="div1">
         This is first line.
     </div>
    <div class="div2">
        This is second line.
    </div>
</body>
</html>

Result:

In the above example,

  • Different font weights are applied to two DIV elements using CSS classes.