Adding custom fonts in react native 60+

[baterdene-dev]

After react native 60 adding custom fonts have changed. Follow this short tutorial to simply add custom fonts in your app.
React Native CLI can be configured by creating a react-native.config.js at the root of the project. Depending on the type of a package, the set of valid properties is different. To add custom fonts we only need to add one line of code: assets: [‘./assets/fonts/’]

Then add your fonts in ./assets/fonts/ directory

And use like this: fontFamily: ‘Roboto-Regular’
Just that simple we have custom fonts in our react native app :)
If you like the article, don’t forget to clap and share it :)

Via Sergo Kupreishvili

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[nnals]

For future visitors: run npx react-native link afterwards.

[thewolff]

I've follow these steps, but after running npx react-native link I'm not getting any output either way.

[yacobii]

1. make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts
2. make a file in root : react-native-config.js and add:
   module.exports = {
   project: {
   android: {}
   },
   assets: ['./assets/fonts/'],
   };
3. react-native link
4. style={{ fontFamily: "name of font" }}

[sudomann]

I'm using React Native 0.60.5 and ran react-native link, not npx react-native link. Not sure what the difference is.

Probably should add that while this worked with Android right away, I had to go into XCode and build/run the app from there before my custom font could work in ios.

[caiangums]

Hey @sudomann, the difference is that you installed react-native in your NodeJS global environment and you can run react-native link. The npx react-native link command can be ran when you installed react-native in your project dependencies and it'll find it into you node_modules/ project directory. 😄

[shenl923]

why the font name is named another name ? how to query？

[sudomann]

@shenl923 I'm not sure I understand what you are asking. Explain better?

[nnals]

@shenl923 are you referring to the fact that Android uses the font's filename whereas iOS uses the font's PostScript name? In case yes, this article here describes this issue, maybe it helps.

[jallynme]

react-native link doesn't work for v. 0.60

[sudomann]

@jallynme
Create a file in your react native project called react-native.config.js:
In it, paste

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

assets: ['./src/assets/fonts/'], should be the path to wherever you stored your custom fonts in your project folder.
When you run the link command, it should work then.

[maximilize]

Seems like this here is a duplicate of #25697?
This here should be the solution to our problems with linking and rn >=0.60: https://www.npmjs.com/package/react-native-asset

[el-lsan]

Facing this issue on Android!
any solution ?

Using:

    "react": "16.9.0",
    "react-native": "0.61.2",

[EstebanGuti208]

where do I have to create the file react-native.config.js?
where is the root of a project?

[sudomann]

where do I have to create the file react-native.config.js?
where is the root of a project?

When you create a react native project, you give it a name, and a folder is created with that name. That is the root. In that project root folder, there should be at least 2 folders, android/ and ios/.

For example I start a new react native project with $ react-native init myProjectName
Then cd myProjectName, I am now in the root of my project

[MiguelGrability]

For future visitors: run npx react-native link afterwards.

And, if you have more than one font and you have one folder for each font you have to add one by one something like this

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

[saadq]

@MiguelGrability You shouldn't have to list out each font, for our project we are doing:

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

[sudomann]

@saadq If you add new font files to './assets/fonts/', does running the link command again update the native assets with the new fonts, or can this be achieved only by typing in new folders to the assets array? (like @MiguelGrability did).

[saadq]

I haven't tried adding new fonts after my initial setup, but I believe you would need to run npx react-native link after you update the config file.

[kyle-ssg]

Doesn't work for me on react-native 0.60.5, adding this to package.json however did

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

[MuhammadUmairghufran]

@BaterdeneA @react-native-bot
Hi, I applied these steps in my project but not worked

"react": "16.9.0",
  "react-native": "0.61.4",

I added react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts/'], // stays the same
};

Even i run "react-native link" command after check all things but nothing works yet.
Anyone please help ?

[EnesKorukcu]

If you're using expo, you might want to check this guide.
https://docs.expo.io/versions/latest/guides/using-custom-fonts/

[felimoles]

"react-native": "0.60.5"

Font for android dont work

[longnk-1447]

@BaterdeneA @react-native-bot
Hi, I applied these steps in my project but not worked

"react": "16.9.0",
  "react-native": "0.61.4",

I added react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts/'], // stays the same
};

Even i run "react-native link" command after check all things but nothing works yet.
Anyone please help ?

same :(

[maitzeth]

@BaterdeneA @react-native-bot
Hi, I applied these steps in my project but not worked

"react": "16.9.0",
  "react-native": "0.61.4",

I added react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts/'], // stays the same
};

Even i run "react-native link" command after check all things but nothing works yet.
Anyone please help ?

same :(

Same here :(
Using:

"react": "16.9.0",
"react-native": "0.61.5"

[chaojinn]

Same here :(
Using:

"react": "16.9.0",
"react-native": "0.61.5"

on android

npx react-native link runs fine
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

and the generated app-debug.apk does contain the ttf files under assets\fonts
however when using
fontFamily: "Dancing Script"
the font is now shown

[chaojinn]

finally get it working
the font-name in the
fontFamily: "opensanscondensed"
need to be exact match for the ttf file
opensanscondensed.ttf

[firofame]

@jmlavoier I have the same issue. did you find a solution?

[harold-gr-dev]

@jmlavoier I have the same issue. did you find a solution?

I had the same issue despite the clear instructions. For some reason, it didn't work over iOS, so I tried to add a reference link directly in Xcode in:

"Build Phases" -> "Copy Bundle Resources" -> "+" -> "#select your font from assets/fonts folder"

I also added it in my iOS Info.plist:

<key>UIAppFonts</key>
<array>
<string>Your-Font-File-Name.ttf</string>
</array>

and it worked.

[Michaelvons]

1. make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts
2. make a file in root : react-native-config.js and add:
   module.exports = {
   project: {
   android: {}
   },
   assets: ['./assets/fonts/'],
   };
3. react-native link
4. style={{ fontFamily: "name of font" }}

Hi,
the filename should be react-native.config.js instead of react-native-config.js . There's a typo in your instruction.

Thanks.

Life saver !!!

[Michaelvons]

If you don't see any changes after taking the above steps, try exiting the app and run npx react-native run-android

[anastely]

@Michaelvons Hey, I'm trying your way but it does not work for iOS,
I got this error

Build system information
error: Multiple commands produce '/Users/anas/Library/Developer/Xcode/DerivedData/ourprophet-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/ourprophet.app/AntDesign.ttf':
1) Target 'ourprophet' (project 'ourprophet') has copy command from '/Volumes/Work/Works/client-3 Qiam App /qiamApp/QiamApp/node_modules/native-base/Fonts/AntDesign.ttf' to '/Users/anas/Library/Developer/Xcode/DerivedData/ourprophet-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/ourprophet.app/AntDesign.ttf'
2) That command depends on command in Target 'ourprophet' (project 'ourprophet'): script phase “[CP] Copy Pods Resources”

[MujiKhan-dev]

1. make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts
2. make a file in root : react-native-config.js and add:

root folder name should be react-native.config.js

[Michaelvons]

@Michaelvons Hey, I'm trying your way but it does not work for iOS,
I got this error

Build system information
error: Multiple commands produce '/Users/anas/Library/Developer/Xcode/DerivedData/ourprophet-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/ourprophet.app/AntDesign.ttf':
1) Target 'ourprophet' (project 'ourprophet') has copy command from '/Volumes/Work/Works/client-3 Qiam App /qiamApp/QiamApp/node_modules/native-base/Fonts/AntDesign.ttf' to '/Users/anas/Library/Developer/Xcode/DerivedData/ourprophet-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/ourprophet.app/AntDesign.ttf'
2) That command depends on command in Target 'ourprophet' (project 'ourprophet'): script phase “[CP] Copy Pods Resources”

Since you are on ios, the right command would be npx react-native run-ios
Also, follow the steps by @tusharkhatiwada before taking mine.

[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!

[ajsmth]

if you have multiple targets on iOS (e.g a staging build) react-native link will only add the fonts to the main target, you can update the others in build-phases -> copy bundle resources and then update your info.plist to include these fonts as well.

[anetka31]

It still doesn't work for me on android "react-native": "0.62.2".
My path to fonts:

• android/app/src/main/assets/fonts
• src/assets/fonts

This is what I tried:

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

    project: {
        ios: {},
        android: {}, // grouped into "project"
    },
    assets: ['./src/assets/fonts']
}

2. Running react-native link: This didnt give me any errors:

info Linking assets to android project
success Assets have been successfully linked to your project

3. I use react-native-global-font

        let fontName = 'Montserrat-Regular' //'Museo500-Regular'
        GlobalFont.applyGlobal(fontName)
     } ```

4. And try naming the font exactly as its named in styles WITHOUT using any fontWeight.

[maharjanaman]

Is, there a way to link fonts only?
I don't want to link other dependencies which already has autolinking enabled by doing npx react-native link.

[nirmal25990]

I have followed this tutorial and it's working fine for android and ios both. The naming of the font should exactly the same as it's named in styles WITHOUT using any fontWeight.
For i.e.

  textLargeStyle: {
    fontSize: 40,
    textAlign: 'center',
    fontFamily: 'Bradley-Hand-Bold', //<<<<--- Here is the Trick
  },
  textSmallStyle: {
    fontSize: 35,
    marginTop: 20,
    marginBottom: 30,
    textAlign: 'center',
    fontFamily: 'DancingScript-Regular', //<<<<--- Here is the Trick
  }

I got one issue in ios(Unrecognized font-family) and the issue was font name I am using in style is different from actual font name(PostScript Name - That can be get by open it with any font editor and then view details). I have used birdfont.
So

import {Platform} from 'react-native';

  textLargeStyle: {
    fontFamily: Platform.OS === 'ios' ? 'BradleyHandITCTT-Bold' : 'Bradley-Hand-Bold';
  }

[jmlavoier]

@jmlavoier I have the same issue. did you find a solution?

I've stopped the iOS version, I'm just following with Android for a while. Whether I find the solution I will try again.

[shiroze]

Solution for iOS :
Run npx react-native link this will create resources folder in xcode. After finish open xcode and Right Click Resources and choose Add file to "<Project>", find your custom font press Add.

Solution for Android :
Create folder assets/fonts in path android/app/src/main then copy the custom font you want add.
npx react-native link will help you copy react-native-vector-icons fonts automatically.

Error on iOS
Tips error duplicate **“[CP] Copy Pods Resources” (iOS)**
remove vector icons fonts from folder Resources

Good Luck

[talhafiaz09]

Removing default style property like fontWeight also solves the problem because custom font has its own styling properties and will not work if you have added default react-native styling property like fontWeight.

[anastely]

@shiroze That's way work for Android,
In ios, I got this error :(
Unrecognized font-family 'dnfFont'

[shiroze]

@shiroze That's way work for Android,
In ios, I got this error :(
Unrecognized font-family 'dnfFont'

Did you Add file to "<Project>" ?

[KPS250]

After react native 60 adding custom fonts have changed. Follow this short tutorial to simply add custom fonts in your app.
React Native CLI can be configured by creating a react-native.config.js at the root of the project. Depending on the type of a package, the set of valid properties is different. To add custom fonts we only need to add one line of code: assets: [‘./assets/fonts/’]

Then add your fonts in ./assets/fonts/ directory

And use like this: fontFamily: ‘Roboto-Regular’
Just that simple we have custom fonts in our react native app :)
If you like the article, don’t forget to clap and share it :)

Via Sergo Kupreishvili

Tried but no luck for RN V0.63.2.
Created a file react-native.config.js

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

info Linking assets to ios project info Linking assets to android project success Assets have been successfully linked to your project

[mkhataei]

react-native link doesn't work for v. 0.60

use npx react-native link

[dattx-0602]

OS:
"react": "16.9.0", "react-native": "0.61.5",

I Resolved by:

• Remove all FontWeight
• Copy font to android/app/src/main/assets/fonts
• using exact match for the ttf file

Example:

And my style
Before:
{ fontWeight: 'bold', fontFamily: 'Arimo-Bold', color: colors.black, fontSize: fonts.normal, }

After:
{ fontFamily: 'Arimo-Bold', color: colors.black, fontSize: fonts.normal, }

[habeebtheprogrammer]

same issue. tried everything. same issue

[estiventhneira]

@habeebtheprogrammer you try to stop all the app and run again? work for me

[sirajalam049]

npx react-native link worked for me, but be careful, file name should be react-native.config.js not react-native-config.js

I've written complete step by step guide for linking fonts for both iOS and android.

[ghost]

Thanks sirajalam049 your solution worked for me.

[prasanthown]

still i have face same issue on 0.64.0

Solution

please copy paste your font file to

android/app/src/main/assets/fonts

if you have not find the folder of asset inside main folder. please create it assets/fonts folder

Then do
react-native link

its working now without adding any config