5

I'm trying to use this (https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4) to add font but I have problem with this part...

npx react-native link

this command don't shows anything to me... anything; and then console line "C:\Users****\WebstormProjects\myFirstProject> appears again. like I didn't wrote any command at first. what's wrong?

amir
  • 53
  • 1
  • 1
  • 3
  • Make sure your `react-native.config.js` is a JavaScript file instead of TypeScript file (that was the mistake I made haha) – Zernach Jan 26 '23 at 19:44

4 Answers4

9

Use npx react-native-asset for react-native > 0.69

Nicolai Lissau
  • 7,298
  • 5
  • 43
  • 57
  • 1
    As of 10th August 2022. This should be the accepted answer. Once you add your fonts to an `./assets/fonts` directory and add the `react-native.config.js`. `react-native-asset` will do all the heavy lifting for you. – Karl Taylor Aug 10 '22 at 12:13
3

I think, 'link' has been removed in v0.69. Here are the steps to add custom fonts.

  1. Copy the font files to "./assets/fonts" folder.

  2. Add the react-native.config.js file to project root with the code bellow

    module.exports = {
assets:['./assets/fonts']}

  3. For android no need to link but in the ios additionally follow the below steps.

    Open the ios project in Xcode. Drag and drop font files on to "Copy Bundle Resources". enter image description here

Then open the "Info.plist" and add the fonts. enter image description here

After that goto "Product" menu and hit the "Clean Build Folder". Then start the Metro and start your application.

Dinesh
  • 169
  • 2
  • 8
0

in RN +0.69 some times when you are trying to add your custom fonts, you may saw this error :

'react-native-asset' is not recognized as an internal or external command

If you get this error first install yarn add -D react-native-asset as a dev dependency then run npx react-native-asset

fatemeh kazemi
  • 516
  • 6
  • 10
-1

You need to create a react-native.config.js then you can use react-native link command.

Example:

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./src/assets/fonts/Montserrat', './src/assets/fonts/Nunito', './src/assets/fonts/Newsreader', './src/assets/fonts/Anton', './src/assets/fonts/Gilroy'],
};
Dániel Boros
  • 381
  • 2
  • 14