I have followed all the procedures to add and use a custom font in my react native app but it is not working. Below is what I have followed.
Created react-native.config.js and added the below code
module.exports = { assets : ['./assets/fonts'] }
some sources said to add the below in package.json. Added it as well
"rnpm": { "assets": ["./assets/fonts"] }
Now, inside my component I am exactly using the same ttf name for font family style.
style= {styles.textStyles}
const styles = StyleSheet.create({ textStyles : { fontFamily : 'Good Feeling Sans', fontSize : 20, fontWeight : 'bold', margin : 10 } })
7.Ran "npx react-native run-android" and I see no change in the font. :( Any idea why it does not reflect
Try to declare your font style without fontWeight
parameter, so please try to declare your font style as:
const styles = StyleSheet.create({
textStyles : {
fontFamily : 'Good Feeling Sans',
fontSize : 20,
margin : 10
}
})
In stead of manipulating with fontWeight
, you can use special prepared fonts for this (ttf files with weight variants). But if you really need the fontWeight
you can try to declare it with number value, like in example: fontWeight:800
It was a problem with fontWeight
I noticed in previous versions of React Native (< 0.60), maybe still present nowadays.
Make sure you also placed your font files in proper folder, accessible to your app. In your pic, assets/fonts is misplaced I believe, it should be placed under android/app/src/main/assets/fonts
folder.