React-native fontFamily is not working as it should

Question

I am trying to use the custom font called times-news-roman.

I created react-native.config.js file, here is what's inside of it

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts/'], // stays the same
};

I also created my assets folder in the root of the app.

I am trying to use this custom font like this:

headerTextLight: {
color: 'black',
fontWeight: 'bold',
fontSize: 30,
paddingLeft: 10,
paddingTop: 10,
fontFamily: 'times-new-roman',
 },

But I am getting this error:

Unrecognized font family 'times-new-roman'

I am using "react-native": "^0.63.3". Any suggestions please?

question from:https://stackoverflow.com/questions/65905559/react-native-fontfamily-is-not-working-as-it-should

Answer 1

Check that your fonts are included in your bundled resources within the Build Phases section

Add your fonts to the Info.plist

Within your project folder navigate to the Info.plist file where you will want to add your fonts. Hover on the last line in the list and click on the plus sign to add a new line. Select the option “Fonts provided by application.” Now you will add all your fonts and make sure the string is EXACTLY THE SAME as the font file (.otf, .ttf) name.