Use custom-font in React-Native

Question

I would like to use custom font in my app, but I keep getting error

[RCTLog][tid:0x78f70450][RCTConvert.m:581]>Unrecognized font family 'Roboto'

Does this mean I have to mess with the iOS's way to import font directly?

Answer 1

1. Create a new group Fonts within your Xcode project

2. Drag and drop fonts from Finder to the Fonts group you just created, and check your project name in Add to targets list

3. Expand your project name folder within the main directory in your project and open Info.plist

4. Add Fonts provided by application as a new key

5. Add a new item under Fonts provided by application, and set the item value to the full font name with extension for each font you've added to the fonts folder

   • i.e. if the font file name is OpenSans-ExtraBold.ttf, then that should be the value of the item.

6. To use the font in React Native, simply set the fontFamily style attribute for the element (see this). Note that the style should use the name of the font rather than the file name.

   • e.g. in the example above, the style attribute would be fontFamily: 'Open Sans'

7. Run Shift + Command + K to clean last build

8. Then Command + B to start a new build

9. And finally Command + R to run the application

If you still see the error Unrecognized font family restart your react packager.

https://github.com/alucic/react-native-cheat-sheet

Hope it helps!

Answer 2

UPDATE

You don't need to install rnpm manually now. After step one, in step two, you can just use the command react-native link and all your assets will be linked. rnpm is now being merged with react-naitve. Checkout this commit on RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70

---

There is an easier way of doing things through `rnpm. It adds fonts to both android and ios. Place the font you want to add to a suitable location inside your project directory. In your package.json just add the following:

step1

...
    "rnpm": {
          "assets": ["path/to/your/font/directory"]
    },
...

step2

Then from command line do: rnpm link

you can now happily use your fonts in your app.

Note: you have to have rnpm installed for this to work. Just do npm install -g rnpm

Here is the documentation: https://github.com/rnpm/rnpm#advanced-usage

Answer 3

The answer from Aakash is correct.

Method:

1. Add your font to a folder in your react-native project
2. Add to package.json the following

 "rnpm": {
    "assets": ["./your/fonts/folder"]
  }

3. run react-native link in your terminal

Optionally:

1. add rnpm using npm install -g rnpm
2. run rnpm link

Example usage

1. I put myFont.ttf in a folder whose path (relative to package.json) is ./src/assets/fonts
2. I put the following code in package.json file

  "rnpm": {
    "assets": ["./src/assets/fonts"]
  }

3. I run in terminal

react-native link

4. I use it in a Text element in react-native like this: (without the space after the first < and without the space before the last > )

< Text style={{ fontFamily: myFont }}> Hello MyFont! < /Text >

Images: package.json link

Thanks for the great answer Aakash, hope you don't mind the re-breakdown for noobs like myself out there!

Answer 4

That's because iOS does not have the Roboto font available by default.

Exactly. To make it available you have to include it in your project from Xcode. Just follow the steps that this answer provides, it's pretty straightforward.

Once you have done this, then you should have no problem using it from JS.

Answer 5

Many answers are here for react-native version < 0.60

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

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

3- run react-native link command in the root project path.

PS Make sure you have the right path for the fonts folder before running react-native link command

Answer 6

If you are using Create React Native App, when running react-native link you will see this:

react-native link can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.

If all you are trying to do is to add custom fonts, instead of ejecting, you could use Expo, which is also included by default with CRNA. Essentially, you do:

await Font.loadAsync({
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});

Also, you can only do ttf or otf formatted fonts, no ttc fonts: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Here is a detailed doc from Expo: https://docs.expo.io/versions/latest/guides/using-custom-fonts

Answer 7

1. add the font files (i.e. .otf OR .ttf) in root/assets/font folder in your project.

2. in package.json: rnpm: "assets": ["./assets/font"],

   3. if after building your fonts are not being supported then add this one file in root level:

react-native.config.js

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

4. ex: font-name -> Robotto-Regular.ttf then use it like below in styles:

fontFamily: 'Robotto-Regular'

5. run react-native link
6. Then in android side(android studio) and ios side(Xcode) sync the project.
7. run react-native run-android OR react-native run-ios

This should resolve any errors which will be coming of fonts not supporting and you can use your custom fonts.

Answer 8

create a file i.e defaultconfig.js

and in this file add the fonts then use

in widget by fontfamily:''montoface