---
title: "How to Add Custom Fonts in React Native App?"
url: "https://magecomp.com/blog/add-custom-fonts-react-native/"
date: "2026-06-08T11:41:29+00:00"
modified: "2026-06-08T11:41:30+00:00"
author:
name: "MageComp"
categories:
- "React Native"
word_count: 635
reading_time: "4 min read"
summary: "Typography is one of the crucial elements in developing a mobile app since a properly selected typeface would enhance text readability, brand itself, and show professionalism while working with it...."
description: "Learn how to add custom fonts in React Native apps with step-by-step instructions and code examples."
keywords: "React Native"
language: "en"
schema_type: "Article"
related_posts:
- title: "React Native | ActivityIndicator"
url: "https://magecomp.com/blog/react-native-activityindicator/"
- title: "How to Add an App Force Update Popup in React Native?"
url: "https://magecomp.com/blog/add-app-force-update-popup-react-native/"
- title: "React Native | Apollo GraphQL"
url: "https://magecomp.com/blog/react-native-apollo-graphql/"
---
# How to Add Custom Fonts in React Native App?
_Published: June 8, 2026_
_Author: MageComp_
Typography is one of the crucial elements in developing a mobile app since a properly selected typeface would enhance text readability, brand itself, and show professionalism while working with it. Although there are some built-in system fonts available for your project in React Native, most likely you will need to create custom fonts in order to make it unique.
Here you will learn how to install custom fonts in your React Native app.
[](https://magecomp.com/services/hire-react-native-developers/)
## Why Use Custom Fonts?
Using custom fonts will allow you to do the following:
- Create unique branding.
- Make your app look nicer.
- Observe the contents of your app clearly.
- Keep your design uniform across different platforms.
## Configure Custom Fonts in Android
Navigate to your Android project and create the following folder structure:
android/
└── app/
└── src/
└── main/
└── assets/
└── fonts/
├── Poppins-Regular.ttf
├── Poppins-Medium.ttf
## Configure Custom Fonts in iOS
### Step 1: Adding Fonts to Xcode
1. Open **ios/YourProject.xcworkspace** file in Xcode.
2. Right-click on your project in the Project Navigator.
3. Select Add Files to “YourProject”.
4. Choose your font files.
5. Enable Copy items if needed.
6. Click Add.
### Step 2: Edit Info.plist
Open **ios/YourProject/Info.plist** and add the following entry:
```
UIAppFonts
Poppins-Regular.ttf
Poppins-Medium.ttf
```
### Step 3: Running Command
```
cd ios pod install
```
## Recommended Approach
If you have installed version 0.60+ of React Native, follow the instructions below:
- Create assets/fonts.
- Install fonts in your assets/fonts folder.
- Add react-native.config.js file.
```
module.exports = {
assets: ['./assets/fonts'],
};
```
## Example
```
import React from 'react';
import { StyleSheet, View } from 'react-native';
const APP = () => {
return (
Welcome
To
React
Native APP
)};
const styles = StyleSheet.create({
main: {
padding: 10,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
export default APP;
```
## Conclusion
Custom fonts in React Native offer an easy yet highly efficient way to improve both your application and brand design. It is important to put font files in the assets directory, configure assets for React Native, link them properly, and use the fontFamily attribute to build a nice mobile UI.
[](https://magecomp.com/services/shopify-mobile-app-builder/)Also, a typography approach can be considered while using consistent fonts in your app.
## FAQ
**1. What file formats can be used with React Native?**
The file formats .ttf (True Type Font) and .otf (Open Type Font) are supported by React Native.
**2. Is any additional library needed for custom font usage?**
No, it is possible to apply custom fonts through the linking of assets in React Native.
**3. Why is my custom font not displaying?**
There may be several causes including wrong font names, lack of asset linking, or forgetting to rebuild the application.
**4. Are Google fonts compatible with React Native?**
Sure, all you need to do is download your desired fonts from Google Fonts and put their .ttf files in the assets folder.
**5. Do custom fonts reduce the performance of my application?**
The use of too many custom fonts will slightly increase your application size, so it is recommended that you only include the variants of fonts your application actually needs.
---
_View the original post at: [https://magecomp.com/blog/add-custom-fonts-react-native/](https://magecomp.com/blog/add-custom-fonts-react-native/)_
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_
_Generated: 2026-07-06 07:05:37 UTC_