CSS `font-weight` Property

Description

The font-weight CSS property sets the weight or boldness of the font.

The following table summarizes the usages context and the version history of this property.

Default value:	normal
Applies to:	All elements
Inherited:	Yes
Animatable:	Yes. See animatable properties.
Version:	CSS 1, 2, 3

The syntax of the property is given with:

font-weight:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit

The example below shows the font-weight property in action.

h1 {
    font-weight: normal;
}
p {
    font-weight: bold;
}

The following table describes the values of this property.

Value	Description
`normal`	Specifies normal characters.
`bold`	Specifies thick characters.
`bolder`	Selects a font weight that's bolder than the weight inherited from the parent.
`lighter`	Selects a font weight that's lighter than the weight inherited from the parent.
`100`	The numeric values `100` to `900` form an ordered sequence, where each number indicates a weight that is equal to or darker than its predecessor. The keyword `normal` is same as `400`, and `bold` is same as `700`.
`200`
`300`
`400`
`500`
`600`
`700`
`800`
`900`
`initial`	Sets this property to its default value.
`inherit`	If specified, the associated element takes the computed value of its parent element `font-weight` property.

The font-weight property is supported in all major modern browsers.