How to Add a Custom Font in React Native

React Native has become a popular framework for building mobile applications, offering the ability to write apps using only JavaScript. However, the built-in fonts may not always suit the design requirements of every project. Therefore, adding custom fonts can be essential in achieving the desired look and feel.

In this article, we will explore the steps needed to add a custom font in React Native, allowing developers to take complete control over the text appearance in their applications.

Table of Contents

1. Introduction
2. Finding and Choosing a Font
3. Installing the Font
4. Linking the Font with React Native
5. Using the Custom Font in Components
6. Troubleshooting
7. Conclusion

1. Introduction

React Native provides flexibility and ease of customization, and fonts are no exception. We can add custom fonts to a project to maintain consistency with a brand’s theme. Here’s how to do it.

2. Finding and Choosing a Font

You can find free and paid fonts online, but make sure to adhere to the licensing terms of the font you choose.

Popular Sources:

• Google Fonts: A collection of free fonts available for personal and commercial use.
• Adobe Fonts: Subscription-based service with access to premium fonts.
• Font Squirrel: Offers free fonts with various licensing options.

3. Installing the Font

After finding the right font, download the font file, usually in .ttf or .otf format. Then follow these steps:

1. Create a “fonts” folder: In your React Native project directory, create a folder named “assets/fonts” (or similar).
2. Copy the Font File: Place the downloaded font file inside the “fonts” folder.

4. Linking the Font with React Native

Linking the font to React Native is essential. Here’s how to link the custom font in a standard React Native project.

For React Native v0.60+

React Native versions above 0.60 use auto-linking, and manual linking is not required. Just add the following in your react-native.config.js:

module.exports = {
  assets: ['./assets/fonts'],
};

After that, recompile the project:

react-native run-android
react-native run-ios

For React Native below v0.60

If you’re on an older version of React Native, manual linking is required. Follow the documentation specific to your version for manual linking.

5. Using the Custom Font in Components

Once the font is linked, you can use it within your React Native components like this:

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text style={styles.customFont}>Hello, Custom Font!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  customFont: {fontFamily: 'Your-Font-Name', fontSize: 20},
});

export default App;

Make sure to replace “Your-Font-Name” with the actual name of the font.

6. Troubleshooting

Facing issues? Here are common troubleshooting steps:

• Ensure Correct Path: Make sure the path to the font file is correct.
• Restart the Development Server: Sometimes, restarting the server solves the issue.
• Rebuild the Project: Rebuilding the project might help, especially after adding a new asset.

7. Conclusion

Adding custom fonts in React Native is a straightforward process. It not only enhances the visual appeal but also aligns the application’s design with brand guidelines. Follow these steps to inject more personality and uniqueness into your mobile application, thus creating a more engaging user experience.

There we have how to Add a Custom Font in React Native, if you want more like this be sure to check out some of my other posts!