CSS font-weight property

Definition and Usage

The font-weight property sets the thickness of the text.

Description

This property is used to set the font weight of the text displayed by the element. The numeric value 400 is equivalent to the keyword normal, and 700 is equivalent to bold. Each numeric value's font weight must be at least as thin as the next smallest value and at least as thick as the next largest value.

See Also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font property

HTML DOM Reference Manual:fontWeight Property

Example

Set the font weight of three paragraphs:

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
normal Default Value. Defines standard characters.
bold Defines bold characters.
bolder Defines even thicker characters.
lighter Defines even thinner characters.
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Defines characters from thick to thin. 400 is equivalent to normal, and 700 is equivalent to bold.
inherit Specifies that the font weight should be inherited from the parent element.

Technical Details

Default Value: normal
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.fontWeight="900"

Try It Yourself Example

Set the font weight
This example demonstrates how to set the font weight.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
2.0 4.0 1.0 1.3 3.5