New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unrecognized font family #18269

Closed
pKanijam opened this Issue Mar 8, 2018 · 9 comments

Comments

Projects
None yet
5 participants
@pKanijam

pKanijam commented Mar 8, 2018

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

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

This comment has been minimized.

Collaborator

kelset commented Mar 8, 2018

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.

@pKanijam

This comment has been minimized.

pKanijam commented Mar 8, 2018

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.

@kelset

This comment has been minimized.

Collaborator

kelset commented Mar 8, 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.

@pKanijam

This comment has been minimized.

pKanijam commented Mar 8, 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

@LuisUrrutia

This comment has been minimized.

LuisUrrutia commented Mar 8, 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.

@kelset

This comment has been minimized.

Collaborator

kelset commented Mar 8, 2018

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)

@react-native-bot

This comment has been minimized.

Collaborator

react-native-bot commented Mar 8, 2018

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 ContributeWhat to Expect from Maintainers

@pKanijam

This comment has been minimized.

pKanijam commented Mar 12, 2018

Issue resolved following the instructions above.

Thanks @LuisUrrutia, your instructions helped me to find the proper font name to use for iOS build.

Thanks @kelset, your last link helped me to organise my stylesheet properly and get the proper fonts on both iOS and android.

@truongluong1314520

This comment has been minimized.

truongluong1314520 commented Oct 30, 2018

Thank you very very much @LuisUrrutia , you save my life. I spend more then 3 hour to find YOUR SOLUTION..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment