Add custom fonts (Google Fonts) to React native(>= 0.70)

Here, we will know how to add custom fonts to our react native app.

• Go to Google Fonts website and select the font family (e.g: Montserrat)
• For a particular family, we can select multiple styles (e.g: Montserrat-Regular, Montserrat-Bold).After selecting, we click the "Download family" to download the font in a zip.

• We extract the zip file and inside the static folder, we will get a list of styles with extensions .ttf . We copy the required fonts and create a folder in our react native project: PROJECT ROOT/assets/fonts and paste the .ttf files there.
  

• Inside our project root create a file: react-native.config.js and paste the following, to let know react-native where to get the fonts from.
  

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

• One more step before starting your app build, you need to link the asset, using npx react-native-asset (enhancement over react-native link). This will automatically create assets/fonts folder (for android) and make a custom font entry in Info.plist (for ios).

• Now, you can create a text style, by adding the newly added font.
  

const styles = StyleSheet.create({
  title:{
    fontFamily: 'Montserrat-Regular',
  }
})

Results:
Before

After

---