Implemented font-variation-settings for iOS

[davebcn87]

Summary:

This PR extends the support on React Native for variable fonts. This allow to customize any font setting: wght, slnt, wdth are common examples. A font designer can use any custom attribute, this is what we made this feature compatible with any property.

It follows the css standard font-variation-settings. This attribute is a string, formatted as a key value pairs separated by commas:

.boldText {
   font-variation-settings: "'whgt' 850";
}

Screenshots

Fabric	Paper

The Android implementation of this feature is being implemented by another PR from @matinzd. We've been pairing on this solution to follow a similar implementation for both platforms.

Changelog:

[iOS] [ADDED] - Add fontVariationSettings support for variable fonts in iOS

Test Plan:

I've added examples in the rn-tester app using variable fonts. I've tested the following scenarios:

• Common attributes: wght, wdth, slnt.
• Custom attributes: FILL
• Mixing font-variation-settings with other styles that affect font descriptors, like font-variant. See tabular-nums example.
• It works in both architectures, Fabric and Paper (See screenshot).

This is an example of the final implementation usage code:

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

[facebook-github-bot]

Hi @davebcn87!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	19,542,634	+27
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	22,896,376	+15
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: a908387
Branch: main

[react-native-bot]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This PR was closed because it has been stalled for 7 days with no activity.

[matinzd]

Please reopen the PR.

[ovy9086]

has this been abandoned ?

[matinzd]

@ovy9086 I didn’t get a chance to continue working on it after I left DD 😆 I also collaborated with @davebcn87 on it for a while.

Android PR: #36371

We eventually paused work on it because the main branch was changing rapidly with the new architecture updates, which led to a lot of conflicts.