CSS font-weight Property


Example

Set different font weight for three paragraphs:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

Try it yourself »

Definition and Usage

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

Default value: normal
Inherited: yes
Animatable: yes. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.fontWeight="bold" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-weight 2.0 4.0 1.0 1.3 3.5


CSS Syntax

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

Property Values

Value Description Play it
normal Defines normal characters. This is default Play it »
bold Defines thick characters Play it »
bolder Defines thicker characters Play it »
lighter Defines lighter characters Play it »
100
200
300
400
500
600
700
800
900
Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontWeight property



Color Picker

colorpicker