How to add custom fonts to react-native v0.61.x?

Question

How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.

When I execute this command:

react-native link

This make some aditional linking which generate extra error.

So how Can I Link only fonts folder.

Answer 1

create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).

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

after all run react-native link to link the resources to your project.

you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:

const styles = StyleSheet.create({
    text: {
        fontFamily: "yekan",
    },
})

as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.

Answer 2

create a file in root (react-native.config.js)

module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};

Create a folder called assets in root and paste the font file under fonts folder(assets/fonts/xxxx.ttf)

Run npx react-native link in command line.

Answer 3

You can add custom font in react-native using expo-font.

1. Install >> expo install expo-font

    import * as Font from 'expo-font'
   
    loadFonts=async()=> {
        await Font.loadAsync({
          // Load a font `Montserrat` from a static resource
          popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),
   
          // Any string can be used as the fontFamily name. Here we use an object to provide more control
          Montserrat-SemiBold': {
            uri: require('../../assets/fonts/Poppins-Medium.ttf'),
            display: Font.FontDisplay.FALLBACK,
          },
        });
        this.setState({ fontsLoaded: true });
      }
   
    componentDidMount(){
        this.loadFonts();
      }
   
    render(){
    return(
    <View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
    )
    }
   

For reference, click here.