3
votes

When building iOS app on React Native, the simulator launches successfully but the app reports an error: "Unrecognized font family 'Roboto'", 'Roboto-Thin', or some variation.

Screenshot below:

enter image description here

Command I ran:

react-native run-ios
2
Please provide more information and what you've tried so far.theoretisch
If you can share your code it will be easier to help youJose Vf
Please add more details before you posting questionsAkila Devinda
I think its this image is evident enough to figure out the problem. Seems like font Roboto is not working on iOSMehroze Yaqoob

2 Answers

14
votes

Like @theoretisch and @JoseVf mentioned before I have, please provide more information and what you've tried so far.

By putting in time to ask a question, you will increase the chance of getting a good answer quickly. Also please refer to How do I ask a good question? section for more info on that.

All that said, in the spirit of helping you out the following would fix your issue.

Use fontFamily: 'System' instead of fontFamily: 'Roboto'

Explanation You are trying to find Roboto font on iOS where it's not included by default in the operating system. On Android however, it is.

So by giving fontFamily: 'System' you are saying to React Native pick the default system font family thats default to the current platform your running on. For iOS this is going to be San Francisco and for Android this will be Roboto

Note that if you want to show Roboto font family on both platforms (your design might be as such) then you need to include that said font in your react native app bundle and then you wouldn't get this issue.

8
votes

I had exactly same issue. Project building perfect in android and build failing in iOS.

To fix this I did these steps:

1) Added Roboto.tff file in <projectRoot>/assets/fonts folder

2) Added file in Xcode project Resources:

enter image description here

3) Added line <string>Roboto.ttf</string> in UIAppFonts key in Info.plist file

  <key>UIAppFonts</key>
  <array>
        ....
        <string>Roboto.ttf</string>
  </array>

4) Checked that file exists in Build Phases Copy Bundle Resources

enter image description here

Ran Product->Clean Build Folder, Restarted JS server, Rebuilt