CSS font-weight Property

CSS font-weight property specifies the weight or boldness of the font.

Example:

.p1{
  font-weight: normal;
}
.p2{
  font-weight: bold;
}
.p3{
  font-weight: bolder;
}

You can also use a numeric value to specify the font weight. Each numeric value corresponds to a particular font weight. For example, 400 is same as normal, 700 is same as bold, and 800 is same as bolder and so on. See the example below:

Example:

.p1{
  font-weight: 400;
}
.p2{
  font-weight: 700;
}
.p3{
  font-weight: 800;
}

CSS Syntax

The font-weight property has the following syntax:

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

Property Values

The font-weight property accepts the following values:

normalThis is the default value. The text is displayed normally.
boldSpecifies a bold font weight.
bolderSpecifies a font weight higher than the bold fonts.
lighter Specifies a lighter font weight.
number100(Thin)
200(Extra Light)
300(Light)
400(Normal)
500(Medium)
600(Semi Bold)
700(Bold)
800(Extra Bold)
900(Ultra Bold)
initialSets the font-weight property to its default value(normal).
inheritInherits the font-weight property from the parent element.

General Info

Default Valuenormal
InheritedYes
JavaScript Usageelement.style.fontWeight = “bold”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment