Load customised font in react native

Question

I want to load custom font i my app.

I try this

Create a assets/fonts where you can find the fonts i want to use
I add rnmp in the package.json like that : "rnmp": { "assets": ["./assets/fonts/"] }
I link like that: react-native link

Then i use my font like that : fontFamily: "Lato-Light",

{

 "main": "node_modules/expo/AppEntry.js",
 "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "eject": "expo eject"
  },
 "dependencies": {
     "expo": "^32.0.6",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk- 
 32.0.0.tar.gz",
 "react-navigation": "^3.11.0"
 },
"devDependencies": {
     "babel-preset-expo": "^5.0.0"
},
"rnmp": {
     "assets": ["./assets/fonts/"]
},
"private": true
}

The font should be load but i get this error :

"fontFamily" "Lato-Light" is not a system font and has not been loaded through Font.loadAsync

Does this solve your issue? How to load custom fonts with the useFonts hook in React Native — Henke
– Henke, Commented Sep 25, 2023 at 12:23

albertohdez9 · Accepted Answer · 2019-06-12 09:43:01Z

1

I assume you are using expo in this project. As the error you've shown says, you just have to load the desired fonts in the app loading process. In you App.js file, import the fonts you want to use as const, and add an async call to load them into the app. You can use the following code:

//In  the import section
import {Font} from 'expo';
const Light = require('./assets/fonts/Lato-Light.ttf');

//In the componentDidMount
await Font.loadAsync({
    'Lato-Light': Light
});

Note the await in the Font.loadAsync call. You have to make the componentDidMount method async (async componentDidMount() {...}) and then add await before the Font... call.

Hope this helps!

answered Jun 12, 2019 at 9:43

albertohdez9

285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load customised font in react native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related