Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Packaged fonts show as system fonts on iOS but not Android #2503

Open
mmmoussa opened this issue Jun 27, 2024 Discussed in #2257 · 4 comments
Open

Packaged fonts show as system fonts on iOS but not Android #2503

mmmoussa opened this issue Jun 27, 2024 Discussed in #2257 · 4 comments

Comments

@mmmoussa
Copy link

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
Copy link
Contributor

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
Copy link
Author

@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.

@Rag0n
Copy link

Rag0n commented Nov 25, 2024

Hey @wcandillon, I know you're busy, just wanted to highlight this issue - it would be nice to extend api with ability to use custom fonts already included into the app.

I can also see similar issue has been opened.

@johnsiah
Copy link

This inconsistency confuses me as well, as It would be nice to make Android aligned to access the packaged font without the need of loading and bundling the font twice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants