CODEWITHSUNDEEP
react-native
user14587589
user14587589

Reputation: 459

React-native fontFamily is not working as it should

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. enter image description here

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'

enter image description here

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

Upvotes: 0

Views: 411

Answers (1)

jamal
jamal

Reputation: 1105

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

enter image description here

Add your fonts to the Info.plist

enter image description here

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.

Upvotes: 2

Related Questions