How to add custom font in react native android

Question

I want to set fontFamily to roboto thin of my toolbar title.

I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running

react-native start

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener
ated\source\r\debug\android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app
\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera
ted\source\r\debug\android\support\v7\appcompat'
    at Error (native)

When I am removing the font then it is working fine. I am unable to fix this issue. What's the reason?

There is step by step process explained at https://stackoverflow.com/a/52916277/5519329 — Sateesh Yemireddi, Nov 05 '18 at 12:25
Note that if you don't want to use the Postscript name (e.g. `FontName-Bold` which will cause **typefont modifiers** such as `fontWeight` to mismatch the font on Android, in addition to being inconsistent with how fonts are handled on iOS, you should follow up this guide: https://stackoverflow.com/a/70247374/2779871 — Jules Sam. Randolph, Dec 17 '21 at 15:45

HarshitMadhav · Answer 1 · 2022-07-26T15:07:29.870

106

UPDATE

Many answers are here for adding custom font in react-native for 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 = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};

For those running on react-native version < 0.69.x

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

For those running on react-native version >= 0.69.x, Since link is deprecated so react-native link will not work anymore, the command react-native link is replaced by npx react-native-asset.

More info about the release can be seen here: https://github.com/react-native-community/cli/releases/tag/v8.0.0

edited Jul 26 '22 at 15:07

answered Jul 29 '19 at 12:19

HarshitMadhav

4,769
6
36
45

7

This one here! This is the right answer for 0.60+ version! – Ahmad Maleki Oct 27 '19 at 14:07
1

Great answer. One note though: this doesn't work for iOS unless you __also__ change the build system to legacy. – SwiftsNamesake Dec 19 '19 at 12:57
@SwiftsNamesake where can the build system be changed? is it a config somewhere? – hussainb May 03 '20 at 03:47
1

@codin https://stackoverflow.com/questions/51205221/how-can-i-use-the-legacy-build-system-with-xcode-10s-xcodebuild – SwiftsNamesake May 03 '20 at 15:27
1

Worked like a charm – Morteza Jun 05 '20 at 06:54
Here's the complete [tutorial to add custom fonts](https://garbagevalue.com/blog/use-custom-fonts-in-react-native) – Siraj Alam Jan 17 '21 at 18:34
This part is unnecessary and can be removed: `project: { ios: {}, android: {} },` – Dror Bar Oct 03 '21 at 13:59
@HarshitMadhav as of 0.69.x, the command is `npx react-native-asset` instead of react-native link. https://stackoverflow.com/questions/72872203/unrecognized-command-link-when-linking-fonts-in-react-native – Diego Ferreyra Jul 26 '22 at 04:28
Don't forget to rebuild your project with `yarn ios` on ios after adding the fonts – Philip E Jun 06 '23 at 23:53

score 67 · Accepted Answer · edited Nov 04 '22 at 22:40

67

Add your fonts file in

Project folder/android/app/src/main/assets/fonts/font_name.ttf

Restart the package manager using react-native run-android
Then you can use your font in your style e.g

fontFamily: 'font_name'

edited Nov 04 '22 at 22:40

tamilselvancst

478
1
3
19

answered Jan 24 '17 at 11:57

Sport

8,570
6
46
65

1

Do you need any import or require statements to use the font after these steps? – lifelonglearner Sep 10 '20 at 00:47
1

It works for me without having to do any additional config or import – Fanchen Bao May 03 '21 at 19:43
what about for ios? – cbisum Jul 09 '22 at 07:06

score 48 · Answer 3 · answered Jun 13 '17 at 10:19

48

Put all your fonts in you React-Native project directory

./assets/fonts/

Add the following line in your package.json

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

finally run in the terminal from your project directory

$ react-native link

to use it declare this way in your styles

fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,

fontFamily: 'Raleway-Bold'

answered Jun 13 '17 at 10:19

Nitin Anand

795
6
9

4

This answer is better than the accepted one, it is cleaner and works also for ios. – Nic Szerman Jun 28 '17 at 03:37
1

For me its not working on android at all. The fonts are present in the `app/src/assets/fonts`. Tried with filename without extension and as well wit font family name which works on iOS. – parohy Aug 03 '17 at 08:49
3

This is out of date. `react-native link` shouldn't be used with RN60 and rnpm is being deprecated – Matt Fletcher Dec 13 '19 at 15:23
@AmanDeep Refer my answer above it works. – HarshitMadhav Jan 18 '21 at 10:56
if you are already using react-native-vector-icons don't forget to remove duplicate files from android assets folder – juxhin bleta Mar 10 '22 at 11:31

Ben Butterworth · Answer 4 · 2020-01-13T05:45:27.800

12

Update:

From the cli docs, "rnpm" is deprecated and support for it will be removed in next major version of the CLI.

Instead, create a react-native.config.js in your project folder

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

Put your fonts in ./assets/fonts. Reference your fonts (e.g. McLaren-Regular.ttf) in the styles prop, {fontFamily: 'McLaren-Regular'}. If you're using styled components, then font-family: McLaren-Regular

No linking or legacy build settings needed for either platforms. If that didn't work (sometimes it doesn't for me), run npx react-native link, even if you're using autolinking.

edited Jan 13 '20 at 05:45

answered Jan 08 '20 at 17:26

Ben Butterworth

22,056
10
114
167

autolink ---> `Even if you're using autolink` – Relm Mar 29 '21 at 15:13
Important: do not forget to link and clean! – Nicolas Mar 02 '22 at 21:44

score 11 · Answer 5 · answered Dec 01 '17 at 17:03

If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.

Steps:

Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)
From the target component (for example: App.js) load Expo's Font module:
```
import { Font } from 'expo'
```

Load the custom font using componentDidMount:

componentDidMount() {
  Font.loadAsync({
    'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
  })  
}

Finally, use the style attribute to apply the desired font on a <Text> component:
```
<Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
```

Due to Expo's constraint of not being able to *fully run offline, then I think your opening statement is a little, er misleading.. I use both Expo & react-native, Expo is great, but simply doesn't have the features for a lot of common use-cases. Nice answer though — Lee Brindley, Feb 03 '18 at 19:32

score 5 · Answer 6 · answered Nov 26 '22 at 16:31

STEP 1:

Create a config file at the root of the project named "react-native.config.js"

STEP 2:

Add the following code inside.

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

STEP 3:

Run the following command:

npx react-native link       (React-native version < 0.69)
npx react-native-asset      (React-native version > 0.69)

score 2 · Answer 7 · answered Sep 04 '19 at 09:11

Adding Custom Font with EXPO

If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.

Steps

Move your font to asset/fonts folder
From the target component (for example: App.js) load Expo's Font module:

import { Font } from 'expo'

Set a state

this.state = {
   fontLoaded: false
}

Load the custom font using componentDidMount:

async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}

Finally, use the style attribute to apply the desired font on a component:

{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

Enjoy Coding....

My Output:

Man that seems like alot of steps – Lorenzo Covarrubias Jan 06 '23 at 06:31 — Lorenzo Covarrubias, Jan 06 '23 at 06:31

Anayo Oleru · Answer 8 · 2022-01-18T11:09:47.963

RNPM has been merged into React Native core. This means that you don’t need RNPM anymore. So please they don’t want you to use it. Stop using it.

Here are 7 steps broken down to help you set fonts up:

Have your fonts ready, you can download your fonts from GoogleFonts, AdobeFonts, etc. Fonts can be in .ttf, or .otf
Create a configuration file in the root of your project for fonts. Create a file called:

react-native.config.js
Create the folder to house your fonts. You can create a folder called fonts inside the assets folder.
Paste your .ttf or .otf fonts inside of it.
Write a configuration inside of react-native.config.js file, and paste the following:

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

Change the path to the path of the folder housing your fonts.

Now natively set the fonts for Android and IOS. You don’t need to manually do that, just run on your terminal:

react-native link
Any new fonts you add, make sure you run react-native link again on your terminal to natively set the fonts.

score 1 · Answer 9 · answered Aug 02 '19 at 11:06

@nitin-anand's answer was the most appropriate and cleaner than the rest, but that method is now deprecated and now we will have to create a react-native.config.js file in our root with the following configuration as an example:

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

score 1 · Answer 10 · edited Jul 08 '20 at 05:17

1

Set in Project.json:
```
rnpm { 
    assets:assets/fonts
}
```
react-native link

edited Jul 08 '20 at 05:17

valerybodak

4,195
2
42
53

answered May 23 '20 at 11:25

score 1 · Answer 11 · answered Sep 02 '20 at 06:59

1

For ios:

Add your fonts in given folder structure :

/assets/fonts

and place your fonts in it .

In the root folder . Add a file named

react-native.config.js

copy the code and paste

module.exports = {
assets: [‘./assets/fonts’]

}

answered Sep 02 '20 at 06:59

Aditya Arya

11
2

score 1 · Answer 12 · answered Apr 01 '22 at 05:29

you can easily add Google & custom fonts to react native projects via Expo-font.

1-Using google fonts in react native:

import expo-fonts:

 import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
        // install pakages related to your favourite font for example:@expo-google-fonts/roboto & etc.

then use this hook at the top of your component hierarchy:

    let [fontsLoaded] = useFonts({
        Inter_900Black,
      });
//fontLoaded indicates the loading state of your font

using font:

<Text style={{ fontFamily: 'Inter_900Black'}}>Inter Black</Text>

2-Using custom fonts in react native:

import expo-fonts:

import { useFonts } from 'expo-font';

use this hook at the top of your component hierarchy:

    let [fontsLoaded] = useFonts({
    'Custom-Font': require('./assets/fonts/Custom-Font.otf'),
  });

using font:

<Text style={{ fontFamily: 'Custom-Font'}}>Inter Black</Text>

The second option worked for me. – Wylie Jan 26 '23 at 07:14 — Wylie, Jan 26 '23 at 07:14

score 0 · Answer 13 · edited Jun 21 '20 at 06:38

0

Add in project.json file

rnpm {
assets:assets/fonts 
}

Then perform react-native link

edited Jun 21 '20 at 06:38

jizhihaoSAMA

12,336
9
27
49

answered Jun 21 '20 at 06:05

score 0 · Answer 14 · answered Oct 15 '20 at 20:36

The best way to do it would be to create your own custom component for Text and import it from another file.

Assuming you want to change the default font to "opensans-semibold" (that is the name I gave it after downloading it and saving it).

TYPESCRIPT:

import React from 'react';
import { Text as DefaultText, StyleSheet } from 'react-native';

export function Text(props : any) {
    return(
        <DefaultText style={[styles.defaultStyles, props.style]}> {props.children} </DefaultText>
    )
}
    
const styles = StyleSheet.create({
    defaultStyles: {
        fontFamily: "opensans-semibold"
    }
});

Now import this anywhere else as:

import { Text } from './path/to/component'

and use it as you normally would.

score 0 · Answer 15 · answered May 07 '22 at 08:19

The correct way

import React from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text>
      <Text style={{ fontSize: 40 }}>Platform Default</Text>
    </View>
  );
};

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, May 08 '22 at 06:35

score 0 · Answer 16 · answered Aug 29 '22 at 04:51

For react-native version above 0.60, create a react-native.config.js file in the root of the directory and add the below code,

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

And you should also have the assets folder in root of the directory. Then just run the command npx react-native-asset in your terminal. This is should just work fine.

score -1 · Answer 17 · answered Mar 08 '22 at 12:43

-1

becareful if assets in src folder

in react-native.config.js file

module.exports = {
project: {
    ios:{},
    android:{}
},
assets: ['./src/assets/fonts']// assets in src folder
// assets: ['./assets/fonts']// if assets in root use this

}

answered Mar 08 '22 at 12:43

مصطفى

555
4
9

score -2 · Answer 18 · answered Sep 02 '20 at 06:54

-2

For Android :

put your custom fonts in the following folder:

Project folder/android/app/src/main/assets/fonts/font_name.ttf

Run react-native run-android

Use the font i your code:

title: { fontSize: 20, fontFamily: " font Name" },

answered Sep 02 '20 at 06:54

Aditya Arya

11
2

That's basically a copy of already accepted answer. It does not bring anything new to the question. – Magiczne Sep 02 '20 at 07:41

How to add custom font in react native android

18 Answers18

Update:

The correct way

Linked

Related