react-nativecustom-font

React native Custom font is not working in android


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.

  1. Added assets/fonts under the root directory and added ttf fonts to it

Pic here

  1. Created react-native.config.js and added the below code

    module.exports = { assets : ['./assets/fonts'] }

  2. some sources said to add the below in package.json. Added it as well

    "rnpm": { "assets": ["./assets/fonts"] }

  3. 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 } })

  1. Ran "npx react-native link" and it was linked successfully

Linked Pic

7.Ran "npx react-native run-android" and I see no change in the font. :( Any idea why it does not reflect


Solution

  • 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.