Skip to content
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
Closed

Unrecognized font family #18269

pKanijam opened this issue Mar 8, 2018 · 9 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@pKanijam
Copy link

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link

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
Copy link
Contributor

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
Copy link
Collaborator

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

@react-native-bot react-native-bot added Old Version Ran Commands One of our bots successfully processed a command. labels Mar 8, 2018
@pKanijam
Copy link
Author

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.

@LuongTruong
Copy link

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

@facebook facebook locked as resolved and limited conversation to collaborators Mar 12, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants