skip to Main Content

I’ve been trying to add a custom .ttf font in my React Native project but Metro keeps telling me it’s an "Unrecognized font family" in the iOS simulator. At first I tried using npx react-native link, but I found out this was deleted and that I would have to add them manually.

I then followed an article where I created a Font group in Xcode, added the font files there, updated my Info.plist file with the fonts to use, and tried restarting my React Native build. This also didn’t work.

How are custom fonts supposed to be added in React Native now that linking is no longer an option?

2

Answers


  1. Chosen as BEST ANSWER

    Solution. After hours of not knowing what was wrong, I finally figured out that you have specify a platform, such as npx react-native run-ios.

    I had previously been running npx react-native start which caused an error, most likely having to do with React compiling the project to both Android and iOS (I've only set up iOS fonts so far).

    npx react-native-asset helped to set up my info.plist file automatically and created an Xcode group for fonts.


  2. This library will be helpful to you. I am also using it myself. https://www.npmjs.com/package/react-native-asset.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search