From 54556546730352f19060747f288d1da318e80cb0 Mon Sep 17 00:00:00 2001 From: Evan Katz Date: Thu, 13 Aug 2026 18:33:09 -0700 Subject: [PATCH 1/2] Document fontVariationSettings for variable fonts Added documentation for fontVariationSettings property. --- docs/text-style-props.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/text-style-props.md b/docs/text-style-props.md index 227fccadbf4..f47bbb105f6 100644 --- a/docs/text-style-props.md +++ b/docs/text-style-props.md @@ -827,6 +827,16 @@ Allows you to set all the font variants for a font. Can be set by using an array --- +### `fontVariationSettings` + +Configures variation axes for a variable font. Each axis is identified by a four-character OpenType tag, such as `wght` for weight, `wdth` for width, `opsz` for optical size, or a custom axis supported by the font. Settings can be provided as an object or as a CSS-compatible string + +| Type | +| -------------------------------------------- | +| string or object: `{[axis: string]: number}` | + +--- + ### `letterSpacing` Increase or decrease the spacing between characters. By default there is no extra letter spacing. From fb51f0a7b23916aa30b2b87cf17dc3c19e5f6f1c Mon Sep 17 00:00:00 2001 From: Evan Katz Date: Fri, 14 Aug 2026 12:55:39 -0700 Subject: [PATCH 2/2] Enhance documentation for fontVariationSettings Added examples and clarified usage for fontVariationSettings. --- docs/text-style-props.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/text-style-props.md b/docs/text-style-props.md index f47bbb105f6..ee7b45e1445 100644 --- a/docs/text-style-props.md +++ b/docs/text-style-props.md @@ -829,7 +829,22 @@ Allows you to set all the font variants for a font. Can be set by using an array ### `fontVariationSettings` -Configures variation axes for a variable font. Each axis is identified by a four-character OpenType tag, such as `wght` for weight, `wdth` for width, `opsz` for optical size, or a custom axis supported by the font. Settings can be provided as an object or as a CSS-compatible string +Configures variation axes for a variable font. Each axis is identified by a four-character OpenType tag, such as `wght` for weight, `wdth` for width, `opsz` for optical size, or a custom axis supported by the font. Settings can be provided as an object or as a CSS-compatible string. + +The object and string forms below are equivalent; both set the wght axis to 500: + +```tsx + + Variable font + +``` + +For more information about variation axes and the CSS string syntax, see MDN's font-variation-settings (https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) documentation. | Type | | -------------------------------------------- |