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\'
         


        

Answer 1

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 2

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 3

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 4

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 5

create a file i.e defaultconfig.js

and in this file add the fonts then use

in widget by fontfamily:''montoface

Answer 6

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!