DEV Community

Cover image for Add custom fonts (Google Fonts) to React native(>= 0.70)
Abhirup Datta
Abhirup Datta

Posted on

23 1 1

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.

select-styles

  • 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.
    fonts folder

  • 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.
Enter fullscreen mode Exit fullscreen mode

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


**Results:**
Before
![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q54icdhwdet82rm78xim.png)

After
![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b4jw48u5ucex4jm1w3f.png)

---








Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay