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