Skip to content

Add font-variation-settings feature for variable fonts #829

Open
@davebcn87

Description

@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>
  1. Symbol Fonts with Multiple Axes
<Text
  style={{
    fontFamily: 'MaterialSymbolsSharp',
    fontVariationSettings: "'wght' 100, 'FILL' 0",
  }}>
  {String.fromCodePoint(59576)}
</Text>
  1. 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
Simulator Screenshot - iPhone 15 Pro - 2024-05-27 at 10 22 34 Simulator Screenshot - iPhone 15 Pro - 2024-05-27 at 10 36 58

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions