React-native: Custom fonts not working on React-Native 0.62

[aldimirprincipal]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

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: https://i.stack.imgur.com/loEph.png

This is what I tried:

1. Creating react-native.config.js file on root project with the following code:

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts']
  };

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

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

In android/src/main/assets/fonts they get correctly added.
The name I use is the same and is correct, and I also tried changing the names to lower case but that didn't work.

Why is this not working?

React Native version:

Binaries:
Node: 13.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
Languages:
Python: 2.7.17
npmPackages:
@react-native-community/cli: Not Found
react: 16.9.0 => 16.9.0
react-native: ^0.62.0 => 0.62.0
npmGlobalPackages:
react-native: Not Found

[anwersolangi]

I also got the same issue.... I follow the guideline https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4.
I Created the react-native.config.js file with
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts'],
};

run the npx react-native link and also tried with yarn react-native link and there is no error.
I saw the fonts in the android/src/main/assets/fonts folder with my fonts.
I use the same and correct font name which i used in the fonts file but still not getting the desired/custom fonts. I also tried to make the font name in lower case also but that did not work also.
Please look over the issue and resolve it. Thanks

[ajiehatajie]

same issue in version 0.62

[anwersolangi]

same issue in version 0.62

I got it working by changing the directory of the assets/fonts folder from the android/src/main/assets to android/app/src/main/assets/fonts
i think the problem is somehow in the linking process/react-native-cli.
This is temporary solution for the problem. But we want it to be fixed as soon as possible, Thanks

[aldimirprincipal]

As @anwersolangi commented, copying the assets to android/app/src/main/ worked wonders! Please fix this bug for future problems because this is just a workaround and sometimes this just doesnt happen, so its inconsistent.

[turbothinh]

@anwersolangi did you fix for iOS?

[anwersolangi]

@anwersolangi did you fix for iOS?

I use this for android development only.

[regalstreak]

npx react-native link isn't working for me after adding

module.export = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['./assets/fonts/']
}

I had to manually copy my assets directory to android/app/src/main to make them work on Android. For iOS, you'll have to search for a guide or something and edit Info.plist or use xcode to generate it.

[maaz-jabbar]

Use the manual Linking procedure in this guide
https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
For both iOS and Android.

[sonvodev]

Was it fixed?
I'm using react native newest version to test but it seems to not working
I followed 2 links
https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

When i ran react-native link. I saw the fonts were linked to android/app/src/main/assets/fonts
But nothing special then. For the ios, it's working smoothly.
Please give me some advices.
Thank in advance!

[ilya-raevskiy]

Was it fixed?
I'm using react native newest version to test but it seems to not working
I followed 2 links
https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

When i ran react-native link. I saw the fonts were linked to android/app/src/main/assets/fonts
But nothing special then. For the ios, it's working smoothly.
Please give me some advices.
Thank in advance!

Same problem, looking for solutions

[sonvodev]

@ilya-raevskiy
I've tried to remove react-native.config.js and added the code below to package.json
It's working now. But i think you can keep react-native.config.js.

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

then rm -rf node_module && yarn install && react-native run-android

[sujithsomraaj]

I have followed the exact same thing mentioned here and it works

https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

Using: Mac OS && React Native 0.62

1. Create a Folder called assets & Create a Fonts folder inside it.
2. Place the fonts in TTF format within there
3. run npx react-native link (I am using native CLI)
4. Open and see your Info.plist and android/app/main/assets/fonts you will see your fonts.

[wuazhu]

Use the manual Linking procedure in this guide
https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
For both iOS and Android.

it didn't work for my andorid

[lauriharpf]

https://medium.com/@mehrankhandev/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4 worked on iOS and Android with RN 0.62.2. If it's not working for you:

Double-check

1. Are your fonts in TTF format?
2. Did you rename font files as in the article (filename without prefix matches PostScript name)?
3. Have a) font files been copied to /android/app/src/main/assets/fonts and b) do ios/MyProjectName/Info.plist & ios/MyProjectName.xcodeproj/project.pbxproj contain rows with the font file names? If not:
   
   
   
   • Did you run npx react-native link (or react-native link, depending on your setup)?
   
   
   • Did you create the react-native.config.js as in the article? (note the two dots, .config.js)
   
   
4. Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).
5. Is your style definition correct, e.g. style={{ fontFamily: "SFUIDisplay-Bold" }}? Try it on other <Text> elements in your app to weed out problems related to the element itself (e.g. the fontWeight issue).
6. Have you stopped the Metro bundler and any emulators (e.g. rebooted your machine)?
7. Have you tried other fonts than the ones you actually want? Try e.g. the fonts in the article to rule out problems with your fonts.
8. Are you using Expo instead of vanilla React Native? If yes, check out https://docs.expo.io/guides/using-custom-fonts/

Good luck!

[putupadang]

thankyou sir @lauriharpf , my problem is using fontWeight

[mdehghani65]

thankyou sir @lauriharpf , my problem is using fontWeight

me too. I was using fontWeight: 'bold' without including the bold version of the font in the project. after including that too, worked fine