CSS font-weight Property

Description

The font-weight property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

Initial value: normal
Applies to: All elements
Inherited: Yes
Media: Visual
Computed value: Numeric weight value
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.fontWeight

Syntax

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Values

normalNormal font weight. Same as 400.
boldBold font weight. Same as 700.
bolderSpecifies a bolder weight than the inherited value.
lighterSpecifies a lighter weight than the inherited value.
100, 200, 300, 400, 500, 600, 700, 800, 900Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used.
inherit

Example

HTML

<p class="test">font-weight: 100; </p> 

<p>font-weight: normal;</p> 

<p class="test2">font-weight: bold;</p> 

<p class="test3">font-weight: 900;</p>

CSS

.test {
   font-weight: 100;
}
.test2 {
   font-weight: bold;
}
.test3 {
   font-weight: 900;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

3	12	2	1	3.5	1

Tablets / Mobile

1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 1st November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu