CSS @font-face - font-weight

The font-weight CSS descriptor permits the authors to specify font weights for the specified fonts in the @font-face at-rule.

font-weight descriptor can be used exclusively to specify the font face'e weight, i.e. how thick or thin the font should look like. These font faces correspond to the different styles of the same font family.

The descriptor font-weight takes the same values as that of its corresponding font-weight property.

The font-weight descriptor should not to be confused with the font-weight property. The font-weight descriptor is used solely with the @font-face at-rule to explicitly select bold font faces for that rule. The font-weight property is then used elsewhere in the style sheet to apply that font weight to an element.

For a particular font family, there are some limited weights available and in case a specified weight does not exist, the nearby weight is used. Fonts that lack bold typeface, gets synthesized by the user agent. In order to avoid this, the shorthand property font-synthesis can be used.

Possible Values

The font-weight CSS descriptor can have one of the following values:

  • normal: Specifies normal font-weight, which is equal to 400.

  • bold: Specifies bold font-weight, which is equal to 700.

  • <number>: Specifies a <number> value between 1 to 1000 (inclusive). Higher values correspond to a bolder font than the lower values.

Syntax

font-weight = auto | normal | bold | <number [1,1000]> ]";

CSS font-weight - Weight Name Mapping

The following table explains the mapping of numerical values and their corresponding 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)

CSS font-weight - Variable Fonts

Many of the fonts have a specific weight, corresponding to one of the numbers in the common weight name mapping, shown in the table above. But there are some fonts that support a range of weights with fine granularity to a great extent, these are called the variable fonts. They give the user much more control over the font-weight that they are choosing.

The wght variation of TrueType or OpenType variable fonts, is useful in implementing the varying weights.

Accessibility concerns: Fonts with font-weight equal to 100 (Thin/Hairline) or 200 (Extra Light), especially in the case of fonts with low contrast color ratio, might not be very clear to the people with low vision conditions.

CSS font-weight - Number Value

Following example demonstrates the setting of weight value for a font face, using the range 100 and 900 used inside the @font-face at-rule:

<html>
<head> 
<style>
  @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      font-weight: 100,900;
      }

   .container {
      font: 2.5rem "f1", sans-serif;
   }

   .font-wt-400 {
      font-weight: 400;
   }

   .font-wt-bold {
      font-weight: bold;
   }

   .font-wt-900 {
      font-weight: 900;
   }
</style>
</head>
<body>
      <p class="container font-wt-400">font - 400</p>
      <p class="container font-wt-bold">font - bold</p>
      <p class="container font-wt-900">font - 900</p>
</body>
</html>
Advertisements