Add font-variation-settings feature for variable fonts

[davebcn87]

Introduction

Variable fonts support in React Native is currently limited compared to native iOS/Android and web platforms. While React Native supports variable fonts, it lacks fine-grained control over font variations that designers and developers need.

Web platforms use font-variation-settings to specify custom font characteristics, enabling:

• Non-standard font weights (e.g., 450 between regular and medium)
• Custom axes defined by font designers
• Standard variation axes (weight, width, slant, etc.)
• Symbol font variations (fill, optical size, etc.)

Details

Both iOS and Android platforms natively support variable font features. We propose exposing these capabilities through React Native's Text component API, matching the CSS implementation pattern.

We've created proof-of-concept implementations for both iOS and Android, supporting both old (Paper) and new (Fabric) architectures.

Implementation examples

1. Custom Font Weights

<Text 
  style={{
    fontFamily: 'Inter',
    fontVariationSettings: '"wght" 850'
  }}>
  Extra Bold Text
</Text>

2. Symbol Fonts with Multiple Axes

<Text
  style={{
    fontFamily: 'MaterialSymbolsSharp',
    fontVariationSettings: "'wght' 100, 'FILL' 0",
  }}>
  {String.fromCodePoint(59576)}
</Text>

3. Multiple Variation Settings

<Text
  style={{
    fontFamily: 'MyVariableFont',
    fontVariationSettings: "'wght' 600, 'wdth' 80, 'slnt' -5"
  }}>
  Custom Text
</Text>

Key Features:

• Supports all standard variation axes (wght, wdth, slnt, ital, opsz)
• Allows custom variation axes defined by font designers
• Compatible with existing font-related style properties
• Overrides basic font properties when both are specified
• Works consistently across iOS and Android

Screenshots

Fabric	Paper

Discussion points

• Performance impact of parsing variation settings
• Interaction with existing font style properties
• How to handle invalid variation settings
• Documentation updates
• Support for other platforms other than iOS and Android

[cipolleschi]

cc. @necolas @elicwhite @cortinico

[stefan-schweiger]

Just ran into this today. The font weights for variable font with Raleway for example work even now (but on android you need to add a according font.xml). But when using Material Symbols the font weight just won't work on iOS. My only assumption is because I would actually need to set the font-variation-settings. And this is even more painful when you try to use properties like fill etc which have no equivalent in classic css props.