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

albertohdez9 albertohdez9 · Accepted Answer · 2019-06-12T09:43:01

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!

Load customised font in react native

1 Answers