2

I've faced this error using react-native 0.61.3-0.61.5, maybe older or newer versions don't have this bug.

Here is recommended way that didn't work for me.

1) I've placed fonts in src/assets/fonts folder

2) specified path to fonts folder in react-native.config.js -> assets: ["./src/assets/fonts/"]

3) tried running both react-native link and npx react-native link

Stanislau Buzunko
  • 1,630
  • 1
  • 15
  • 27
  • 1
    Does this answer your question? [Unrecognized font family on iOS simulator with React Native](https://stackoverflow.com/questions/42410354/unrecognized-font-family-on-ios-simulator-with-react-native) – nima Oct 24 '20 at 19:06

2 Answers2

6

After spending about two hours I've found a workaround for iOS. It's not nice and I recommend it only after trying official way I described in question. If it didn't work, here is a workaround I used.

  1. place fonts in your project if you haven't done it already
  2. open info.plist with your editor and look for <key>UIAppFonts</key>, if not found add
  <key>UIAppFonts</key>
  <array>
    <string>name_of_your_font.ttf</string>
    ...
  </array>
  1. place all your fonts and save
  2. open Xcode -> your project -> Build phases -> Copy bundle Resources
  3. Click on "+" and select Add other -> select your fonts and click Add

Re-run the project and it works. Final note, on iOS you must specify name of font not filename.

Have a nice day!

Stanislau Buzunko
  • 1,630
  • 1
  • 15
  • 27
  • Thanks. In my case, some of my fonts seem not included in the Info.plist. Looks like not all fonts on the zip file are compatible, so I have to cherry-picks only the fonts that are included in Info.plist file. – fxbayuanggara Jan 28 '22 at 17:46
  • here is a better explanation that covers more use cases https://stackoverflow.com/a/42410970/5766054 – Stanislau Buzunko Jan 05 '23 at 22:47
1

This is the docs from where ive integrated custom fonts in my react native app. Very tedious work but yes, in ios there are more steps. Please find link which explains beautifuly. rn- custom-fonts

This is the step what you did :

enter image description here

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45