React-native: Unrecognized font family

Created on 8 Mar 2018 · 9Comments · Source: facebook/react-native

Getting error Unrecognized font family 'Museo Sans 500' in iOS simulator only. App works fine on android emulator.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 9.3.0
Yarn: Not Found
npm: 5.7.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.2 => 0.53.2

Expected Behavior

App should properly open the app.

Actual Behavior

getting red screen.
simulator screen shot - iphone 8 - 2018-03-08 at 14 56 36

Steps to Reproduce

Downloaded "Museo Sans 500.ttf" and add in the folder /assets/fonts/
Add "rnpm": {
"assets": [
"./assets/fonts/"
]
} in package.json
Run the command below in terminal:
react-native link
react-native run-ios throws error.

Ran Commands Locked

Source

pKanijam

Most helpful comment

@pKanijam in that window (FontBook), go to View -> Show font info (I don't know the exact name in the menu) and you should see something like this:
captura de pantalla 2018-03-08 a la s 12 53 42

And you should use the PostScript Name and if this doesn't work, you can use the next code:

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

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

That you should place in "AppDelegate.m", after NSURL *jsCodeLocation;
And of course, after use it, you should delete it.

LuisUrrutia on 8 Mar 2018

👍13 🎉6 😄2 ❤1

All 9 comments

Looks to me that you are missing the native side step of adding it to the Info.plist: https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

If following the linked guide fixes the issue for you, please close it afterwards.

kelset on 8 Mar 2018

👍1

The third step in the above mentioned steps adds the font in info.plist.

Extract from my info.plist
<key>UIAppFonts</key> <array> <string>Museo Sans 500.ttf</string> </array>

Still getting the same issue.

pKanijam on 8 Mar 2018

Ok, then I suggest you double check in the Font Book that the name is the right one; there are instances when the name of a font is not the same in Android & iOS (ex. MuseoSans500 vs Museo Sans 500). Double check in XCode too.

kelset on 8 Mar 2018

I checked in the Xcode and also in the Font Book. It says 'Museo Sans 500' as shown below:
Also, I did 'Erase all Content and Settings' and restarted the device. Then ran: react-native run-ios.
The issue persists.

screen shot 2018-03-08 at 6 08 54 pm

pKanijam on 8 Mar 2018

@pKanijam in that window (FontBook), go to View -> Show font info (I don't know the exact name in the menu) and you should see something like this:
captura de pantalla 2018-03-08 a la s 12 53 42

And you should use the PostScript Name and if this doesn't work, you can use the next code:

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

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

That you should place in "AppDelegate.m", after NSURL *jsCodeLocation;
And of course, after use it, you should delete it.

LuisUrrutia on 8 Mar 2018

👍13 🎉6 😄2 ❤1

Exactly as @LuisUrrutia is saying 👍

An other link that should explain the 'name difference' visually is in the example here: https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/ . (as you can see the FontFamily name is different)

kelset on 8 Mar 2018

👍2

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}