CSS font-weight Property


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.

The font-weight property sets how thick or thin characters in text should be displayed.

CSS Syntax

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

Possible Values

  • 100, 200, 300, 400, 500, 600, 700, 800 and 900 − Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.

  • normal − Default. Defines normal characters and equivalent to the value 400.

  • bold − Equivalent to the value 700.

  • bolder − The font characters for the element should be heavier than those of the parent element.

  • lighter − The font characters for the element should be lighter than those of the parent element.

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.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -