Open
Description
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
- Custom Font Weights
<Text
style={{
fontFamily: 'Inter',
fontVariationSettings: '"wght" 850'
}}>
Extra Bold Text
</Text>
- Symbol Fonts with Multiple Axes
<Text
style={{
fontFamily: 'MaterialSymbolsSharp',
fontVariationSettings: "'wght' 100, 'FILL' 0",
}}>
{String.fromCodePoint(59576)}
</Text>
- 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
Metadata
Metadata
Assignees
Labels
No labels