Adding custom fonts in react native 60+

Question

Adding custom fonts in react native 60+

baterdene-dev opened this issue 5 years ago · comments

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 · Answer 1 · Mon Jul 29 2019 09:35:06 GMT+0800 (China Standard Time)

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.

Nicolai Benker · Answer 2 · Sat Aug 03 2019 00:13:20 GMT+0800 (China Standard Time)

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

Joseph Wolff · Answer 3 · Wed Aug 07 2019 04:10:33 GMT+0800 (China Standard Time)

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

Mehdi Yaghoubi · Answer 4 · Wed Aug 14 2019 07:16:18 GMT+0800 (China Standard Time)

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

Willy Njundong · Answer 5 · Sun Sep 01 2019 04:49:29 GMT+0800 (China Standard Time)

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.

Ilê Caian · Answer 6 · Sat Sep 07 2019 06:05:26 GMT+0800 (China Standard Time)

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 · Answer 7 · Thu Sep 12 2019 17:01:09 GMT+0800 (China Standard Time)

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

Willy Njundong · Answer 8 · Thu Sep 12 2019 17:12:32 GMT+0800 (China Standard Time)

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

Nicolai Benker · Answer 9 · Thu Sep 12 2019 17:51:20 GMT+0800 (China Standard Time)

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

Jeremy · Answer 10 · Thu Sep 26 2019 00:39:32 GMT+0800 (China Standard Time)

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

Willy Njundong · Answer 11 · Thu Sep 26 2019 00:53:04 GMT+0800 (China Standard Time)

@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 · Answer 12 · Thu Sep 26 2019 08:50:36 GMT+0800 (China Standard Time)

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

Ehsan · Answer 13 · Sun Oct 20 2019 00:02:07 GMT+0800 (China Standard Time)

Facing this issue on Android!
any solution ?

Using:

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

EstebanGuti208 · Answer 14 · Wed Nov 13 2019 00:00:48 GMT+0800 (China Standard Time)

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

Willy Njundong · Answer 15 · Wed Nov 13 2019 00:24:44 GMT+0800 (China Standard Time)

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

Miguel Cárdenas · Answer 16 · Fri Nov 15 2019 03:44:15 GMT+0800 (China Standard Time)

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'],
  };

Saad Quadri · Answer 17 · Fri Nov 15 2019 21:21:20 GMT+0800 (China Standard Time)

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

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

Willy Njundong · Answer 18 · Sat Nov 16 2019 12:10:55 GMT+0800 (China Standard Time)

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

Saad Quadri · Answer 19 · Sun Nov 17 2019 05:13:37 GMT+0800 (China Standard Time)

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 Johnson · Answer 20 · Mon Nov 18 2019 20:24:24 GMT+0800 (China Standard Time)

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

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

Muhammad Umair Ghufran · Answer 21 · Fri Nov 22 2019 19:50:52 GMT+0800 (China Standard Time)

@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 ?

Enes Korukcu · Answer 22 · Wed Dec 04 2019 02:31:08 GMT+0800 (China Standard Time)

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

x · Answer 23 · Thu Dec 12 2019 04:00:23 GMT+0800 (China Standard Time)

"react-native": "0.60.5"

Font for android dont work

longnk-1447 · Answer 24 · Thu Dec 12 2019 15:20:37 GMT+0800 (China Standard Time)

@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 :(

André Iván · Answer 25 · Sat Dec 14 2019 05:13:22 GMT+0800 (China Standard Time)

@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"

jin · Answer 26 · Thu Dec 19 2019 06:42:20 GMT+0800 (China Standard Time)

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

jin · Answer 27 · Thu Dec 19 2019 08:55:28 GMT+0800 (China Standard Time)

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

Pritesh Baviskar · Answer 28 · Thu Dec 19 2019 20:20:11 GMT+0800 (China Standard Time)

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

Also, make sure that the font name is correct. On macOS, you can right click on the .ttf file and hit Get Info to find the full name of the font. Use that as a parameter to fontFamily.

x · Answer 29 · Wed Jan 08 2020 02:40:43 GMT+0800 (China Standard Time)

i have a solution for Android

go to

android/app/src/main/assets/Fonts.xml

use the same name of the fonts, but android separate de fonts my type: regular, italic and bold

if you style contain propertie "bold" and your font no have in this archive (Fonts.xml), this dont work (you can edit your Fonts.xml to solve the problems)

protip:

Font_Title: { ...Platform.select({ ios: { fontFamily: NameFont_iOs', }, android: { fontFamily: NameFont_Android', }, }), },

Michael Oshogbunu · Answer 30 · Thu Jan 09 2020 05:59:17 GMT+0800 (China Standard Time)

DO THIS

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

AND THIS

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

THEN THIS
Re-run your app to initialize with the newly bundled resources (i.e the fonts)
npx react-native run-android

Should work fine!!

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

Mateus Marinho · Answer 31 · Sat Jan 11 2020 04:47:55 GMT+0800 (China Standard Time)

I saw this in stackoverflow and worked for me

"I just renamed my file react-native-config.js to react-native.config.js and it worked."

Alek-devsy · Answer 32 · Sun Jan 12 2020 06:59:56 GMT+0800 (China Standard Time)

Had this same error for about 2-3 hours...

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

npx react-native link did not work.

But after moving the fonts folder into a new folder assets in the root level and editing the config to

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

the npx react-native link command passed. Not sure why the assets folder needs to be in the root level of the project for it to link up.

Mauricio Soto · Answer 33 · Wed Jan 15 2020 21:43:29 GMT+0800 (China Standard Time)

Hi!

I use:

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

this worked for me:

in react-native.config.js:

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

run:

react-native link

Alek-devsy · Answer 34 · Wed Jan 15 2020 22:15:28 GMT+0800 (China Standard Time)

Or maybe I just need better glasses

Had this same error for about 2-3 hours...
module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['.src/assets/fonts/']
};
npx react-native link did not work.

But after moving the fonts folder into a new folder assets in the root level and editing the config to
module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['./assets/fonts/']
};
the npx react-native link command passed. Not sure why the assets folder needs to be in the root level of the project for it to link up.

Or maybe I need too pay a little more attention to the paths.. Should have been ./src instead of .src..

Mauricio Soto · Answer 35 · Thu Jan 16 2020 02:36:15 GMT+0800 (China Standard Time)

Or maybe I just need better glasses
Had this same error for about 2-3 hours...
module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['.src/assets/fonts/']
};
npx react-native link did not work.
But after moving the fonts folder into a new folder assets in the root level and editing the config to
module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['./assets/fonts/']
};
the npx react-native link command passed. Not sure why the assets folder needs to be in the root level of the project for it to link up.
Or maybe I need too pay a little more attention to the paths.. Should have been ./src instead of .src..

nice

zeitamin · Answer 36 · Tue Jan 21 2020 04:05:13 GMT+0800 (China Standard Time)

where is this mentioned in the documentation? what are the other usages of react-native.config.js?

Héctor Ramos · Answer 37 · Wed Jan 22 2020 04:26:53 GMT+0800 (China Standard Time)

Closing after several months without followup from the author. Please make sure to fill in the issue template if you decide to file a new issue.

André Iván · Answer 38 · Fri Jan 24 2020 00:23:40 GMT+0800 (China Standard Time)

Closing after several months without followup from the author. Please make sure to fill in the issue template if you decide to file a new issue.

I think everyone is waiting for a fix.

Etienne · Answer 39 · Wed Feb 19 2020 03:18:46 GMT+0800 (China Standard Time)

Renaming the fonts and removing the "-" worked for me. Linking correctly.

Deleted user · Answer 40 · Sun Mar 01 2020 10:19:49 GMT+0800 (China Standard Time)

So... how do we use custom fonts. A lot of people, myself included are having problems.

I've checked the filename, the font name, the assets being copied properly, the react-native.config.js file, the works.

Are there some rules we need to know about the filenames/font names?

Of course 4 minutes after I post this I find the problem.

Here's the latest guide for React Native 0.61.5 custom font anyone stuck on this:

Create at root a react-native.config.js file:

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

Create a folder at root assets/fonts and past in your font, the file name doesn't matter at all here. Make sure it's a .ttf file.

Finally, in your operating system find the font name, in Mac I had to install the font, and use it's PostScript name for it to work.

All you need to do then is run yarn react-native link.

Then yarn ios to run your app in your ios sim.

Janaka Rathnayake · Answer 41 · Thu Mar 19 2020 19:37:54 GMT+0800 (China Standard Time)

This worked for me:

Create a folder at root assets/fonts and past custom-font.ttf file in there.

in react-native.config.js:

module.exports = {
  assets: ["./android/assets/fonts/"],
};

run:
react-native link

Re-run your app to initialize with the newly bundled resources (i.e the fonts)

npx react-native run-android

Pablo Espinosa · Answer 42 · Fri Apr 03 2020 07:31:22 GMT+0800 (China Standard Time)

Hey @rachelnabors @hramos this(fonts) seems a bit undocumented in the React Native docs, and I think is a common use case in React Native apps (happening to me atm). Should we try to improve it? 😺

Anas Tely · Answer 43 · Fri Apr 03 2020 07:52:54 GMT+0800 (China Standard Time)

@sergiotapia-papa Hey How can i handle this with react-native-vector-icon?

Tim Van Dijck · Answer 44 · Fri Apr 10 2020 21:36:34 GMT+0800 (China Standard Time)

Ok, I've been struggeling with this today and luckily I found my issue.

When I did "react-native link" the font files were copied to:

android/src/main/assets/fonts

This is the wrong location, the location that it should have been was:

android/app/src/main/assets/fonts

When I copied them manually and ran "react-native run-android" again the fonts finally worked!

Shubham Takode · Answer 45 · Tue Apr 21 2020 15:58:39 GMT+0800 (China Standard Time)

@timvandijck You are correct. This is happening for me on 0.62. I was following this guide.

Alberto Ammar · Answer 46 · Thu Apr 23 2020 11:50:59 GMT+0800 (China Standard Time)

I saw this in stackoverflow and worked for me

"I just renamed my file react-native-config.js to react-native.config.js and it worked."

Its work for me ❤️

Varun Patel · Answer 47 · Thu Apr 23 2020 13:11:43 GMT+0800 (China Standard Time)

I saw this in stackoverflow and worked for me

"I just renamed my file react-native-config.js to react-native.config.js and it worked."

It's worked for me.

AHMED SALIH AC · Answer 48 · Fri May 01 2020 11:49:17 GMT+0800 (China Standard Time)

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

yarn link

Ethyaan · Answer 49 · Sat May 02 2020 02:48:22 GMT+0800 (China Standard Time)

Still have the issue with loading custom font into react native project
when I run react-native link it will add many fonts besides my font into the info.plist and android fonts directory. and also running yarn ios fails after this.

Is there any official documentation that explains how we can achieve loading custom fonts without such messy activities?

Đặng Quốc Đạt · Answer 50 · Tue May 05 2020 16:45:21 GMT+0800 (China Standard Time)

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

Thank! It work for me.
"react": "16.11.0",
"react-native": "0.62.2",

Tushar Khatiwada · Answer 51 · Wed May 06 2020 14:04:46 GMT+0800 (China Standard Time)

make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts

make a file in root : react-native-config.js and add:
module.exports = {
project: {
android: {}
},
assets: ['./assets/fonts/'],
};

react-native link

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.

Trần Đức Anh · Answer 52 · Thu May 07 2020 17:04:10 GMT+0800 (China Standard Time)

Remember to run yarn android or yarn ios after run npx react-native link. I tried it and it works well

Avneesh · Answer 53 · Fri May 15 2020 20:27:21 GMT+0800 (China Standard Time)

The solutions mentioned in this post did not work for me, this worked in react-native.config.js
module.exports = { "assets": [ "fonts" ],

and commented out the assets line in babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], // assets: ['fonts'], };

also added a assets > fonts > individual font files folder in my root

Samuel Suther · Answer 54 · Tue May 19 2020 15:14:49 GMT+0800 (China Standard Time)

Will there be an official Article How to add custom fonts in the react-native documentation soon? (Or does I only missed it?)
I think it's an important part, which should not be missed in the documentations.

Rafael Mendiola · Answer 55 · Wed May 20 2020 03:16:00 GMT+0800 (China Standard Time)

I've been having a similar issue. I'm trying to set up a custom font on a project, but running npx react-native link doesn't seem to work.

My React Native Info

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 301.42 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 13.6.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

My react-native.config.js (I double checked that this is not mispelled):

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

I added a font at assets/fonts/myfont.ttf. I ran npx react-native link and I got:

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project

This is the diff it made on my Info.plist, it created the UIAppFonts key, but it didn't add the font.

        <key>UIViewControllerBasedStatusBarAppearance</key>
        <false/>
+       <key>UIAppFonts</key>
+       <array/>

This is what it changed in my project. I was expecting it to add the font in the android directory, but it didn't do anything to android/

➜  conversations-rn-ui git:(raf-ui-icon-20-05-19) ✗ git status
On branch raf-ui-icon-20-05-19
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   ios/ConversationsMobile.xcodeproj/project.pbxproj
	modified:   ios/ConversationsMobile/Info.plist

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	assets/
	react-native.config.js

superfabiuz · Answer 56 · Wed May 20 2020 14:46:41 GMT+0800 (China Standard Time)

The information proposed in this post does not work for me. Are there other solutions?
react-native-cli: 2.0.1
react-native: 0.61.4

I found and tried these solutions but they don't work for me https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

Avneesh · Answer 57 · Wed May 20 2020 15:35:38 GMT+0800 (China Standard Time)

The information proposed in this post does not work for me. Are there other solutions?
react-native-cli: 2.0.1 react-native: 0.61.4

I found and tried these solutions but they don't work for me https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

Did you check out my solution from 5 days back?

superfabiuz · Answer 58 · Wed May 20 2020 19:00:16 GMT+0800 (China Standard Time)

Did you check out my solution from 5 days back?

Yes I did, but it didn't work!

Graeme Chidgey · Answer 59 · Wed May 20 2020 19:18:59 GMT+0800 (China Standard Time)

I migrated to 0.62.2 at the weekend, and am now unable to get the custom fonts working. I just get the Unrecognized font family message.

João Lavoier · Answer 60 · Wed May 20 2020 23:07:27 GMT+0800 (China Standard Time)

I've followed the this post: https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4 and it didn't work for me on iOS.

I'm trying to add the Roboto font from Google.

version

"react": "16.11.0",
"react-native": "0.62.2",

I created the <root>/assets/fonts.

Configured the react-native.config.js as explained

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

After that I ran the npx react-native link

I've checked the Info.plist.

Checked the TARGET -> Copy Bundle Resources too.

Added the Roboto fontFamily.

const styles = StyleSheet.create({
  custom: {
    fontFamily: 'Roboto-Regular',
    fontSize: 32
  }
});

And I'm getting the same error.

superfabiuz · Answer 61 · Wed May 20 2020 23:20:47 GMT+0800 (China Standard Time)

I've followed the this post: https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4 and it didn't work for me on iOS.

I don't know why, maybe because it's a post from Jan 12, 2019... many things, releases and upgrades have changed since that day. I've also tried several solutions but I've not yet managed to load custom fonts.

Tushar Khatiwada · Answer 62 · Thu May 21 2020 14:09:43 GMT+0800 (China Standard Time)

@jmlavoier Are you sure you restarted the packager and rebuild the app?

João Lavoier · Answer 63 · Fri May 22 2020 02:14:32 GMT+0800 (China Standard Time)

@tusharkhatiwada Yes, I restarted the server and rebuilt the app.

Avneesh · Answer 64 · Fri May 22 2020 11:21:08 GMT+0800 (China Standard Time)

https://callstack.github.io/react-native-paper/fonts.html this link and my comment from #25852 (comment) a few days back worked for me. Take care about the react native version and the related install instructions

Luzimar Oliveira · Answer 65 · Fri May 22 2020 22:54:32 GMT+0800 (China Standard Time)

I'ts worked for me:

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

afilp · Answer 66 · Sat May 23 2020 01:59:26 GMT+0800 (China Standard Time)

I have different variants (schemes) and I do not want some fonts to be added in some variants (or some fonts to be added only to a particular variant, etc.).

I assume that this cannot be done through the "config" file? I need to do this manually?

Jonatan Ortiz Maldonado · Answer 67 · Sun May 24 2020 05:35:03 GMT+0800 (China Standard Time)

It wasn't working for me because I set a bold property in the CSS, when I removed that property the font was displayed. So I used the bold font itself directly.

João Lavoier · Answer 68 · Mon May 25 2020 06:46:29 GMT+0800 (China Standard Time)

It wasn't working for me because I set a bold property in the CSS, when I removed that property the font was displayed. So I used the bold font itself directly.

It's not my case.

Samuel Suther · Answer 69 · Mon May 25 2020 18:18:34 GMT+0800 (China Standard Time)

same as @JonatanOrtiz figured out, I've found that at least, it only works for me, if I set the fontWeight in the stylesheet to normal.
Seems you have to use an Font-File which was specially made for bold instead of setting it via Stylesheet to other than to fontWeight: 'normal',.

Example for Font-Face "Quicksand":

titleStyle: {
  fontFamily: 'Quicksand-Bold'
},
contentText: {
  fontFamily: 'Quicksand-Regular'
},

On google-webfonts, there are most of the time different files for differeent font-weights inside the Package.

Jonatan Ortiz Maldonado · Answer 70 · Mon May 25 2020 22:12:36 GMT+0800 (China Standard Time)

It wasn't working for me because I set a bold property in the CSS, when I removed that property the font was displayed. So I used the bold font itself directly.

It's not my case.

"Note: One thing to be cautious of when integrating custom fonts into your project is that Android will use the font file name when referencing the font, whereas IOS will use the postscript name. To check the postscript name of the file you will need to use Font Book. So in my example, I will be checking the postscript name of the font Montserrat.
As you can see from the screenshot below, the full name for the Montserrat font is Montserrat Regular; however, the postscript name is Montserrat-Regular, so, if necessary, you’ll need to rename the font files to be the postscript file name. However, with Montserrat the font file name is already like the postscript name, so for this font I don’t have to do it."
https://medium.com/better-programming/how-to-add-custom-fonts-to-your-react-native-project-c64305281b9

Maybe that will help you.

peetzweg/ · Answer 71 · Tue May 26 2020 17:19:40 GMT+0800 (China Standard Time)

Just FYI haven't read everything but make sure to clean your builds before expecting the font to be included in the app.

For me the react-native.config.js + npx react-native link + cleaning my build folder worked flawlessly.

XCode => CMD + Shift + K
or => Product => Clean Build Folder

Not sure about android as of now, maybe just remove the build folder manually
rm -rf ./android/build?

Firoz Ahmed · Answer 72 · Fri May 29 2020 00:25:50 GMT+0800 (China Standard Time)

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

Harold G · Answer 73 · Sat May 30 2020 00:56:27 GMT+0800 (China Standard Time)

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

Michael Oshogbunu · Answer 74 · Mon Jun 08 2020 17:46:02 GMT+0800 (China Standard Time)

make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts

make a file in root : react-native-config.js and add:
module.exports = {
project: {
android: {}
},
assets: ['./assets/fonts/'],
};

react-native link

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

Michael Oshogbunu · Answer 75 · Mon Jun 08 2020 17:49:17 GMT+0800 (China Standard Time)

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

Anas Tely · Answer 76 · Thu Jun 11 2020 17:52:20 GMT+0800 (China Standard Time)

@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 · Answer 77 · Wed Jun 17 2020 18:29:24 GMT+0800 (China Standard Time)

make a folder in root app as : assets then fonts fonts folder in assets and put ttf fonts

make a file in root : react-native-config.js and add:

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

Michael Oshogbunu · Answer 78 · Wed Jun 17 2020 20:06:18 GMT+0800 (China Standard Time)

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

Lauri Harpf · Answer 79 · Fri Jun 19 2020 14:51:31 GMT+0800 (China Standard Time)

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!

andy · Answer 80 · Tue Jun 23 2020 01:37:28 GMT+0800 (China Standard Time)

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.

Aneta · Answer 81 · Tue Jun 23 2020 14:45:25 GMT+0800 (China Standard Time)

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:

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

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

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

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.

Aman Maharjan · Answer 82 · Wed Jun 24 2020 20:07:41 GMT+0800 (China Standard Time)

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.

Nirmal Patel · Answer 83 · Fri Jun 26 2020 22:10:44 GMT+0800 (China Standard Time)

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';
  }

João Lavoier · Answer 84 · Tue Jun 30 2020 03:24:08 GMT+0800 (China Standard Time)

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

Juniardy · Answer 85 · Tue Jul 07 2020 17:42:15 GMT+0800 (China Standard Time)

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

Talha Fiaz · Answer 86 · Sun Jul 19 2020 17:08:57 GMT+0800 (China Standard Time)

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.

Anas Tely · Answer 87 · Tue Jul 21 2020 07:22:21 GMT+0800 (China Standard Time)

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

Juniardy · Answer 88 · Wed Jul 22 2020 09:50:44 GMT+0800 (China Standard Time)

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

Did you Add file to "<Project>" ?

Kiran Shinde · Answer 89 · Tue Jul 28 2020 02:03:10 GMT+0800 (China Standard Time)

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 · Answer 90 · Thu Aug 20 2020 16:38:22 GMT+0800 (China Standard Time)

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

use npx react-native link

dattx-0602 · Answer 91 · Mon Aug 24 2020 18:12:23 GMT+0800 (China Standard Time)

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, }

Habeeb abdulrahman · Answer 92 · Wed Jan 06 2021 15:30:37 GMT+0800 (China Standard Time)

same issue. tried everything. same issue

estiventhneira · Answer 93 · Fri Jan 15 2021 00:54:15 GMT+0800 (China Standard Time)

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

Siraj Alam · Answer 94 · Tue Jan 19 2021 23:07:09 GMT+0800 (China Standard Time)

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.

pbassi02 · Answer 95 · Fri Mar 12 2021 08:28:09 GMT+0800 (China Standard Time)

Thanks sirajalam049 your solution worked for me.

prasanth · Answer 96 · Mon Apr 26 2021 13:54:22 GMT+0800 (China Standard Time)

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