font-weight
Quick Summary for font-weight (@font-face)
The font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. The font-weight property can separately be used to set how thick or thin characters in text should be displayed.
Code Usage for font-weight (@font-face)
/* Single values */ font-weight: normal; font-weight: bold; font-weight: 400;  /* Multiple Values */ font-weight: normal bold; font-weight: 300 500; 
More Details for font-weight (@font-face)

font-weight

The font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. The font-weight property can separately be used to set how thick or thin characters in text should be displayed.

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property.

There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold are often synthesized by the user agent. To prevent this, use font-synthesis property.

Syntax

/* Single values */ font-weight: normal; font-weight: bold; font-weight: 400;  /* Multiple Values */ font-weight: normal bold; font-weight: 300 500; 

The font-weight property is described using any one of the values listed below.

Values

normal

Normal font weight. Same as 400.

bold

Bold font weight. Same as 700.

<number>

A <number> value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the Common weight name mapping section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Common weight name mapping

The numerical values 100 to 900 roughly correspond to the following common weight names:

Value Common weight name
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

Variable fonts

Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying weights.

Accessibility concerns

People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

MDN Understanding WCAG, Guideline 1.4 explanations Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

Formal definition

Related at-rule@font-face
Initial valuenormal
Computed valueas specified

Formal syntax

<font-weight-absolute>{1,2}

where <font-weight-absolute> = normal | bold | <number [1,1000]>

Examples

Setting normal font weight in a @font-face rule

The following finds a local Open Sans font or imports it, and allows using the font for normal font weights.

@font-face {   font-family: "Open Sans";   src: local("Open Sans") format("woff2"),        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");   font-weight: 400; } 

Specifications

Specification
CSS Fonts Module Level 4 # font-prop-desc

See also

font-display font-family font-stretch font-style font-variant font-feature-settings font-variation-settings src unicode-range descriptor

Last modified: Jan 17, 2022, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Me
Random CSS Property

scroll-margin-block-end

The scroll-margin-block-end property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
scroll-margin-block-end css reference