Custom fonts not working on React-Native 0.62

Viewed 10348

I'm trying to use a custom font on my app but it doesn't work. I have followed numerous steps from other similar questions but nothing works.

I'm not getting any error.

The path to the assets folder: Assets source

This is what I tried:

    • Creating react-native.config.js file on root project with the following code:
module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts']
  };
    • Running react-native link: This didnt give me any errors:
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project
    • Naming the font exactly as its named in styles WITHOUT using any fontWeight:
<Text style={[styles.texto_Titulo, {fontFamily: "LatoBlack"}]}>
      ENTRADA
</Text>
    • Recompiling with npx react-native run-android after react-native link

Why is this not working?

4 Answers

Okay so this happens to be a current bug for React Native 0.62. The workaround for this problem is copying the assets/fonts folder to /android/app/src/main/ path. This fixed the problem.

My solution was to remove fontWeight from my text styles. Seems font family does not work if fontWeight is provided

Guys if you are following all other solution and still no update then try following steps

  1. add react-native-config.js file
  2. then add fonts in assets/fonts/your font
  3. rename it with lowercase like OpenSans_Regular to opensans_regular
  4. react-native link in terminal in your project folder
  5. after all build your project again using react-native run-android
  6.     fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',
    

I was also getting the same issue the font was not reflecting changes then I build my project again that was my mistake because we adding fonts in our android folder so we need to compile that again. I hope someone may save their time

Related