with expo-font we can render fonts asynchronously when the app loads here is the example. Like wise how we can render fonts without expo.
import {AppLoading} from 'expo'
import * as Font from 'expo-font'
import React from 'react';
state = {
isFontLoaded:false
}
async componentDidMount() {
await Font.loadAsync({
"Bold":require('./src/fonts/Montserrat-ExtraBold.otf'),
"Medium":require('./src/fonts/Montserrat-Medium.otf'),
"Regular":require('./src/fonts/Montserrat-Regular.otf'),
})
this.setState({isFontLoaded:true})
}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 command: npx react-native link
4- usage: in stylesheet use fontFamily:"font name", and also fontweight:''