diff --git a/files/en-us/web/css/@font-face/font-weight/Karantina-Bold.woff2 b/files/en-us/web/css/@font-face/font-weight/Karantina-Bold.woff2 new file mode 100644 index 000000000000000..d9a4a669fe059da Binary files /dev/null and b/files/en-us/web/css/@font-face/font-weight/Karantina-Bold.woff2 differ diff --git a/files/en-us/web/css/@font-face/font-weight/Karantina-Regular.woff2 b/files/en-us/web/css/@font-face/font-weight/Karantina-Regular.woff2 new file mode 100644 index 000000000000000..f78efbd8335c67a Binary files /dev/null and b/files/en-us/web/css/@font-face/font-weight/Karantina-Regular.woff2 differ diff --git a/files/en-us/web/css/@font-face/font-weight/Montserrat[wght].woff2 b/files/en-us/web/css/@font-face/font-weight/Montserrat[wght].woff2 new file mode 100644 index 000000000000000..6a316bfe89e07f5 Binary files /dev/null and b/files/en-us/web/css/@font-face/font-weight/Montserrat[wght].woff2 differ diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md index 134aeee50b326af..59acfc0ce60cc82 100644 --- a/files/en-us/web/css/@font-face/font-weight/index.md +++ b/files/en-us/web/css/@font-face/font-weight/index.md @@ -7,11 +7,11 @@ browser-compat: css.at-rules.font-face.font-weight {{CSSRef}} -The **`font-weight`** CSS descriptor allows authors to specify font weights for the fonts specified in the {{cssxref("@font-face")}} at-rule. The {{cssxref("font-weight")}} property can separately be used to set how thick or thin characters in text should be displayed. +The **`font-weight`** CSS descriptor enables authors to specify a single font weight, or a range of font weights, for the font specified in a {{cssxref("@font-face")}} at-rule. This is then used by the browser to select the appropriate font when a CSS rule sets the desired weight of a font. -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. +Unless it contains a [variable font](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide), a single font file contains characters from a font family in a specific weight and style: for example, "Helvetica bold italic". Typically, a developer will want to use fonts from a single font family in a range of different weights. To accomplish this, you can define multiple {{cssxref("@font-face")}} at-rules for the same family, one for each weight, and set the `font-weight` descriptor to match the font's weight. Then CSS rules can select a font in the appropriate weight by setting the {{cssxref("font-weight")}} property or the {{cssxref("font")}} shorthand 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 typeface are often synthesized by the user agent. To prevent this, use the {{cssxref('font-synthesis')}} shorthand property. +If a font file contains a variable font, it may contain more than one weight. To reflect this, the `font-weight` descriptor can specify a range of weights, given as a space separated pair of weight values. ## Syntax @@ -21,15 +21,21 @@ font-weight: normal; font-weight: bold; font-weight: 400; -/* Multiple Values */ +/* Defining a range */ font-weight: normal bold; font-weight: 300 500; ``` -The `font-weight` property is described using any one of the values listed below. - ### Values +The syntax of the `font-weight` descriptor takes one of the following forms: + +- The keyword `auto`. +- A single `` value. +- A pair of `` values, separated by a space. + +Each `` may be any one of the following: + - `normal` - : Normal font weight. Same as `400`. - `bold` @@ -37,10 +43,6 @@ The `font-weight` property is described using any one of the values listed below - `` - : A {{cssxref("<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](#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](#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: @@ -80,20 +82,118 @@ People experiencing low vision conditions may have difficulty reading text set w ## Examples -### Setting normal font weight in a @font-face rule +### Selecting normal and bold fonts + +In this example we include two fonts, one normal weight, one bold weight, from the ["Karantina"](https://fonts.google.com/specimen/Karantina) font family using two `@font-face` at rules. We set `font-weight` descriptors to match the weight of the fonts. -The following finds a local Open Sans font or imports it, and allows using the font for normal font weights. +After this, CSS rules can select the normal or the bold font for the "Karantina" family just by setting the {{cssxref("font-weight")}} property. Note that the {{htmlelement("strong")}} HTML element also selects the bold font, because by default `` elements use a bold font. + +#### HTML + +```html +

Karantina, normal weight paragraph

+

Karantina, bold weight paragraph

+Karantina, default weight <strong> element +``` + +#### CSS ```css @font-face { - font-family: "Open Sans"; - src: - local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); - font-weight: 400; + font-family: "Karantina"; + font-weight: normal; + src: url("Karantina-Regular.woff2"); +} + +@font-face { + font-family: "Karantina"; + font-weight: bold; + src: url("Karantina-Bold.woff2"); +} + +body { + font-family: "Karantina", serif; + font-size: 3rem; +} + +p.one { + font-weight: normal; +} + +p.two { + font-weight: bold; } ``` +#### Result + +{{embedlivesample("Selecting normal and bold fonts", "", 300)}} + +### Setting a range for a variable font + +In this example we include a variable font, ["Montserrat"](https://fonts.google.com/specimen/Montserrat), using a single `@font-face` at-rule. We've used a `font-weight: 300 700` value to effectively limit the range of weights that are available. If a CSS rule uses our "Montserrat" font, then if it specifies a weight outside this range the weight it gets is clamped to the range. + +To show the effect of this we've included another font using "Montserrat" that does not set the `font-weight` descriptor, and we've called this "Montserrat-complete". + +#### HTML + +```html +

Montserrat, font-weight 100

+

Montserrat, font-weight 900

+

Montserrat-complete, font-weight 100

+

Montserrat-complete, font-weight 900

+``` + +#### CSS + +```css +@font-face { + font-family: "Montserrat"; + src: url("Montserrat[wght].woff2"); + font-weight: 300 700; +} + +@font-face { + font-family: "Montserrat-complete"; + src: url("Montserrat[wght].woff2"); +} + +p { + font-size: 2rem; +} + +p.one { + font-family: "Montserrat", serif; + font-weight: 100; +} + +p.two { + font-family: "Montserrat", serif; + font-weight: 900; +} + +p.three { + font-family: "Montserrat-complete", serif; + font-weight: 100; +} + +p.four { + font-family: "Montserrat-complete", serif; + font-weight: 900; +} +``` + +#### Result + +The result of this is: + +- Setting the `font-weight` property to `100` for "Montserrat" gets a weight of 300. +- Setting the `font-weight` property to `900` for "Montserrat" gets a weight of 700. +- Setting the `font-weight` property to `100` for "Montserrat-complete" gets a weight of 100. +- Setting the `font-weight` property to `900` for "Montserrat-complete" gets a weight of 900. + +{{embedlivesample("Setting a range for a variable font", "", "400")}} + ## Specifications {{Specifications}}