javascript - How can I add custom TTF font in my React Native project? - Stack Overflow

admin管理员组

文章数量:1420907

I'm trying to add custom TTF font to my react native project, I've followed articles :

1) I've create a folder in my root and putted vincHand.ttf in that :

projectName/assets/fonts/vincHand.ttf

2) I've executed this mand :

react-native link

And then I've checked and font has transferred to android path right

3) I've uninstalled the app in the Genymotion and again I've executed this mand :

react-native run-android

But after fontFamily: 'vincHand' that text is shown with default font ...

Consider it, I've downloaded this font from here :

.font

I'm trying to add custom TTF font to my react native project, I've followed articles :

1) I've create a folder in my root and putted vincHand.ttf in that :

projectName/assets/fonts/vincHand.ttf

2) I've executed this mand :

react-native link

And then I've checked and font has transferred to android path right

3) I've uninstalled the app in the Genymotion and again I've executed this mand :

react-native run-android

But after fontFamily: 'vincHand' that text is shown with default font ...

Consider it, I've downloaded this font from here :

https://www.dafont./vinchand.font

• javascript
• android
• react-native
• fonts

Share Improve this question Follow edited Aug 15, 2018 at 4:52 asked Aug 15, 2018 at 4:36 user10179106user10179106

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 0

You should ensure two things:

The first thing is you already defined this in package.json

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

React-Native will automatically copy the font to android/app/src/main/assets/fonts

The second thing is defining this in Info.plist

<key>UIAppFonts</key>
    <array>
        <string>vincHand.ttf</string>
    </array>

Then run react-native link

For usage case:

const styles = StyleSheet.create({
  wele: {
    fontFamily: "vincHand",
    fontSize: 30,
    textAlign: "center",
    margin: 10
  }
});

Good luck!

1. Create assets folder in the root folder of your project.
2. Create fonts folder inside the assets folder.
3. Paste all the fonts inside the fonts folder.
4. Add the below mentioned code inside the package.json file.
5. Run the below mentioned Command

react-native link

6. Fonts will get installed on both the platforms(IOS and Android).

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

Both ios & android (without expo):

1 - create a folder called "assets", inside it create "fonts" folder and put all your ttf files inside it.

2 - create a file in the root called: react-native.config.js and put insdie it :

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

3 - run this mand: npx react-native link

I know this is an old thread, but just in case someone finds it useful.

I followed HDT's instructions, including kouhadi's hint about using react-native.config.js, but it didn't work for me (I'm using React Native v0.75.2).

What did work was running the following mand after setting up the fonts:

npx react-native-asset

This mand re-links the assets, and after running it, my custom fonts worked as expected.

Note: This might be necessary for more recent versions of React Native (like v0.75.x), as the auto-linking may not always pick up the fonts without this manual step.

本文标签： javascriptHow can I add custom TTF font in my React Native projectStack Overflow