feat: font variation settings (wip)

[matinzd]

Summary

This PR adds font variation settings feature for variable fonts in react native. The fontVariationSettings property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

Example:

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

Font characteristics set using fontVariationSettings will always override those set using the corresponding basic font properties, e.g. fontWeight regardless of the order.

Android reference: https://developer.android.com/reference/android/graphics/fonts/FontVariationAxis iOS reference: https://developer.apple.com/documentation/coretext/kctfontvariationattribute MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview

Changelog

[General] [Added] - add fontVariationSettings support for variable font

Test Plan

TBD

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	10,890,932	+2,371,933
android	hermes	armeabi-v7a	10,206,825	+2,372,307
android	hermes	x86	11,373,021	+2,373,698
android	hermes	x86_64	11,226,214	+2,371,625
android	jsc	arm64-v8a	11,514,570	+2,371,967
android	jsc	armeabi-v7a	10,706,288	+2,372,331
android	jsc	x86	11,571,079	+2,373,716
android	jsc	x86_64	11,827,121	+2,371,661

Base commit: cfa03db98b8fdb163869965eec0731b93b49058f Branch: main

[matinzd]

Your comments are welcome regarding the implementation! @NickGerleman @cortinico

[NicoCaro-io]

Any luck on pushing this @matinzd ?

[shenghan97]

@matinzd hey! is this pr close to ready for review?

[davebcn87]

Also interested on this. Any way I can help make some progress here @matinzd?

[matinzd]

I was away for some time from the community. I will try to see if I can continue. There has been a lot of conflicts since then :)

I may need to open a new PR.

[davebcn87]

@matinzd if you need any help I can give a hand on this task

[matinzd]

@davebcn87 Sure! I am up for it. Try to see if you have push access on my branch. We can work on it together. My username is the same on Discord if you want to continue the conversation further.

[davebcn87]

awesome, let's chat on Discord then. Maybe it be nice we start a nice branch as you mentioned so we avoid all the conflicts.

[davebcn87]

Got some progress on iOS side, all the variations that I tried and that the variable font supports work for now:

<Text style={{fontFamily: 'Inter', fontVariationSettings: '"wght" 100'}}>Inter wght 100</Text>
<Text style={{fontFamily: 'Inter', fontVariationSettings: '"wght" 150'}}>Inter wght 150</Text>
 ...
<Text style={{fontFamily: 'Inter', fontVariationSettings: '"wght" 750'}}>Inter wght 750</Text>
<Text style={{fontFamily: 'Inter', fontVariationSettings: '"wght" 800'}}>Inter wght 800</Text>
<Text style={{fontFamily: 'Inter', fontVariationSettings: "'wght' 700"}}>Inter wght 1000</Text>
<Text style={{fontFamily: 'Inter', fontVariant: ['tabular-nums'], fontVariationSettings: "'wght' 700"}}>Inter wght 1000 w/ tabular-nums</Text>
<Text style={{fontFamily: 'Amstelvar', fontVariationSettings: "'wght' 700, 'wdth' 60"}}>Amstelvar wght 700 wdth 60</Text>
<Text style={{fontFamily: 'Amstelvar', fontVariationSettings: "'wght' 700, 'wdth' 120"}}>Amstelvar wght 700 wdth 120</Text>
<Text style={{fontFamily: 'Amstelvar', fontVariationSettings: "'wght' 700, 'opsz' 12"}}>Amstelvar wght 700 opsz 12</Text>
<Text style={{fontFamily: 'Amstelvar', fontVariationSettings: "'wght' 700, 'opsz' 32"}}>Amstelvar wght 700 opsz 32</Text>

[matinzd]

Follow here for the updated PR: https://github.com/facebook/react-native/pull/44667