Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
font-weight

font-weight

Specifies the weight (boldness) of the font.

Sample Code

p.test { font-weight: normal;}
p.test1 { font-weight: bold;}
p.test2 { font-weight: 700;}

Available Values

Value	Description
normal	Displays text at standard weight. Equivalent to the numeric value '400'. This is the default value.
bold	Displays text in bold. Equivalent to the numeric value '700'.
lighter	Makes the text one step lighter than the inherited font weight.
bolder	Makes the text one step bolder than the inherited font weight.
Numeric	You can specify a numeric value: '100', '200', '300', '400', '500', '600', '700', '800', or '900'. However, in practice only '400' and '700' render reliably across browsers.

Browser Display Result

<p style="font-weight: normal;">This is a p element with 'font-weight: normal' applied.</p>

<p style="font-weight: bold;">This is a p element with 'font-weight: bold' applied.</p>

Browser Compatibility

Desktop

Chrome

2 and later ○

1 and earlier ×

Firefox

1 and later ○

Safari

1 and later ○

Edge

12 and later ○

Supported in all versions.

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 and later ○

2 and earlier ×

Mobile

iOS Safari

1 and later ○

Android Browser

4.4 and later ○

3 and earlier ×

Chrome Android

Latest ○

Same as the desktop version.

Firefox Android

Latest ○

Same as the desktop version.

※ Version data is based on MDN.

Overview

Specifies the weight (boldness) of the font. The only values that render reliably are 'normal' (400) and 'bold' (700).

While you can specify fine-grained weights with numbers, virtually no fonts come with all nine weight levels (100–900), making it practically impossible to display all nine different weights.

When an unsupported numeric weight is specified, browsers typically interpret values from '100' to '500' as 'normal', and '600' to '900' as 'bold'.

Note: Some Android devices have Japanese fonts without a bold variant built into the OS, which may prevent bold Japanese text from displaying correctly.

If you find any errors or copyright issues, please contact us.

Home