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