Packaged fonts show as system fonts on iOS but not Android

[mmmoussa]

Discussed in #2257

^{Originally posted by murattil February 27, 2024}
The fonts packaged as assets in my RN app (assets/fonts/[font].ttf) show up as system fonts on iOS when listed with listFontFamilies(), and I am able to use them in the Paragraph API directly without passing a custom font manager. On Android however, they don't show up, and a call to listFontFamilies() just lists a couple of basic Android fonts.

What is the reason for that discrepancy? Is there any way to make the bundled fonts show as system fonts as well, similar to the behaviour on iOS? I know you can create a custom font manager (useFonts), however, as I have >500 fonts that need to be loaded, doing require('...') on all of them takes a very long time, and sometimes crashes the app on lower-end Android devices. On iOS this is not an issue, as they are usable without loading them into a custom font manager.

There are two issues here:

1. On Android, packaged fonts must be loaded into a custom font manager instead of being usable immediately like on iOS, which means additional code and additional time in the render path before fonts become usable
2. When using require(...) with a resource, Metro packages that resource into the bundle. In the case of fonts that have also been packaged in the app using the assets directory, this means that the asset is now packaged twice, increasing total bundle size unnecessarily

[wcandillon]

Can you add a font to the example project at https://github.com/Shopify/react-native-skia/tree/main/example and then we can add a test for it as well debugging the issue

[mmmoussa]

@wcandillon please take a look at #2512. I've packaged the Roboto font with the app natively such that it is usable in a Text component and I've added an e2e test demonstrating how it should be detected. The test passes on iOS but fails on Android.