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

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:

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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 29

Most upvoted comments

thankyou sir @lauriharpf , my problem is using fontWeight

+17

putupadang on Aug 9, 2020

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

Are your fonts in TTF format?
Did you rename font files as in the article (filename without prefix matches PostScript name)?
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)
Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).
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).
Have you stopped the Metro bundler and any emulators (e.g. rebooted your machine)?
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.
Are you using Expo instead of vanilla React Native? If yes, check out https://docs.expo.io/guides/using-custom-fonts/

Good luck!

+13

lauriharpf on Jun 19, 2020

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

+12

anwersolangi on Mar 30, 2020

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

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

+11

sujithsomraaj on May 22, 2020

@anwersolangi did you fix for iOS?

+10

t18n on Mar 31, 2020

Do NOT use FONT-WEIGHT this was the main culprit for fonts not working on Android…

nbaua on Mar 12, 2021

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

Are your fonts in TTF format?

Did you rename font files as in the article (filename without prefix matches PostScript name)?

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)

Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).

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

Have you stopped the Metro bundler and any emulators (e.g. rebooted your machine)?

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.

Are you using Expo instead of vanilla React Native? If yes, check out https://docs.expo.io/guides/using-custom-fonts/

Good luck!

Just remove fontWeight guys

irakeshsuthar on Mar 11, 2021

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!

sonvodev on May 20, 2020

@anwersolangi did you fix for iOS?

I use this for android development only.

anwersolangi on Mar 31, 2020

@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

sonvodev on May 21, 2020

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

Are your fonts in TTF format?

Did you rename font files as in the article (filename without prefix matches PostScript name)?

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)

Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).

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

Have you stopped the Metro bundler and any emulators (e.g. rebooted your machine)?

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.

Are you using Expo instead of vanilla React Native? If yes, check out https://docs.expo.io/guides/using-custom-fonts/

Good luck!

Font weight was breaking the family

pdhruv93 on Sep 2, 2021

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

Are your fonts in TTF format?

Did you rename font files as in the article (filename without prefix matches PostScript name)?

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)

Do you use fontWeight? If yes, try removing it (can cause problems on Android, see https://stackoverflow.com/a/58765980 ).

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

Have you stopped the Metro bundler and any emulators (e.g. rebooted your machine)?

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.

Are you using Expo instead of vanilla React Native? If yes, check out https://docs.expo.io/guides/using-custom-fonts/

Good luck!

Just remove fontWeight guys

Thanks Dude . You made my day

irakeshsuthar on Mar 11, 2021

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.

maaz-jabbar on Apr 28, 2020

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

anwersolangi on Mar 30, 2020