Unrecognized font family on iOS simulator with React Native

Solution 1:

On Android it takes the name of the file and you are done. On iOS however it is a bit more complex.

There are a few steps you should take:

• Double check the font files are included in the Target in XCode
• Make sure they are included in the step "Copy Bundle Resources" (add files, not folders)
• Include them in the Info.plist of the app
• Find the name of the Font through FontBook or with some log statements in your AppDelegate

Explained in more detail here: http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Good luck!

Solution 2:

Implement the following code in your appdelegate file

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"Family name:  %@", name);
    }
}

You should use FONT FAMILY NAME instead of your font file name like the following

fontFamily: "FuturaBT-Book"

Solution 3:

Easy/Working solution 2021. React Native 0.64. XCode 12+

Add these lines in ios/<ProjectName>/Info.plist. Rebuild ios app. that's it!

<key>UIAppFonts</key>
    <array>
      <string>AntDesign.ttf</string>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>Feather.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>Fontisto.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
    </array>

Solution 4:

For me, changing the name of the file to the name of the Font (displayed as I open the file) did it.