CSS font-weight Property

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


  font-weight: normal;
  font-weight: bold;
  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:


  font-weight: 400;
  font-weight: 700;
  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.
200(Extra Light)
600(Semi 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
JavaScript Usageelement.style.fontWeight = “bold”;


  • 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