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
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 myinfo.plist
file automatically and created an Xcode group for fonts.This library will be helpful to you. I am also using it myself. https://www.npmjs.com/package/react-native-asset.