font-weight
Quick Summary for font-weight (@font-face)
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.
Formal definition
| Related at-rule | @font-face |
|---|---|
| Initial value | normal |
| Computed value | as 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
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
