Custom Fonts in React Native for Android and iOS

React Native Custom Fonts

This is an example to use Custom Fonts in React Native for Android and iOS. We will see how to use a custom font in React Native? Where can we find custom fonts? Steps to download custom fonts, and import in Android and iOS, and at last the code sample which will give you a perfect idea about the use of the custom font in React Native.

In the current scenario fonts and Icons have the same importance in the app. If you are planning for the app with beautiful Icons then you also need beautiful fonts to make it perfect. I personally observed many applications using custom fonts nowadays. If you also want to use the custom font in your React Native app then you can continue with this example.

Using custom fonts in React native is very easy. You do not need any external library for it, just add the fonts in your Android and iOS projects and you are good to go.

How to use custom fonts in React Native

As I said, to use the custom fonts in React Native you need to add fonts in Android and iOS projects (To add the custom fonts steps are mentioned below) and after adding the custom font in the project you can directly set the font using fontFamily prop in Style.

Remember you need to import the font before using it in fontFamily

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flexDirection: 'column',
  },
  textLargeStyle: {
    fontSize: 40,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Bold',
  },
  textSmallStyle: {
    fontSize: 35,
    marginTop: 20,
    marginBottom: 30,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Regular',
  },
});

Where Can I Found the Custom Fonts?

For those who have the same question in their mind, You can get lots of different fonts from Google Font’s Official Site. Just visit the site and choose the font you like.

Project Overview

In this example, We will have two text components and we will apply the different custom fonts on it so that we can understand how it works. The main thing in this example is to download the font and import them in the Android and iOS projects which are explained below. So let’s get started with the steps to apply custom font in React Native.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.

If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

Run the following commands to create a new React Native project

npx react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

npx react-native init ProjectName --version X.XX.X

Note If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. Try uninstalling the cli and run the cli using npx.

This will make a project structure with an index file named App.js in your project directory.

Download Fonts

First of all download the font that you want to use in React Native. There are many custom fonts on the Google Fonts site but for this example, I am using

• Dancing Script: https://fonts.google.com/specimen/Dancing+Script

It is a very designer font and you will be able to find the difference in the fonts easily after the completion of the example.

Click the link to go to the download site and follow the steps

1. After opening the URL you will see some sample text with the custom font applied. Click on the Select this syle

2. After clicking on the Select this Style. You can click on Download Family

 

3. This will download zip with fonts in it. In simple language, fonts are some ttf file which you can find in static directory after unzipping the downloaded zip

Importing Custom Font Files in Android

To use Custom Fonts in Android, you need to create asset/fonts directory in projectname/android/app/src/main and have to copy all the font files in it

projectname/android/app/src/main/assets/fonts

Importing Custom Font Files in iOS

Please follow the below steps to use Custom Fonts icons in iOS

1. Create a fonts directory in the iOS project and copy all the font files there

2. Now open the project YourProject -> ios -> YourProject.xcworkspace in Xcode.

3. After opening the project in Xcode click on the project from the left sidebar to open the options and select Add Files to “YourProjectName”

4. Select the fonts directory which you have created. Remember to select Create Folder references from below and click Add

5. Now click the project name on the left top, and select the project name on TARGETS. Click the Info tab on the top menu to see Info.plist and add Fonts provided by application and font files to Info.plist.

If you were an iOS developer or have knowledge about info.plist then you can add following lines directly into info.plist but if you performed the above action then you don’t worry about this as this has been already added by XCode.

<key>UIAppFonts</key>
<array>
    <string>fonts/DancingScript-Medium.ttf</string>
    <string>fonts/DancingScript-Bold.ttf</string>
    <string>fonts/DancingScript-Regular.ttf</string>
    <string>fonts/DancingScript-SemiBold.ttf</string>
</array>

6. After completion, it will look like this

Code to Use Custom Fonts in React Native

If you have done all the above-expected steps then you can move to the code and can use the custom fonts.

Jump into your project

cd ProjectName

App.js

Open App.js in any code editor and replace the code with the following code

// Use of Custom Fonts in React Native for iOS & Android
// https://aboutreact.com/custom-fonts-in-react-native/

// Import React
import React from 'react';

// Import required component
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textLargeStyle}>
          Use of Custom Font in React Native App
        </Text>
        <Text style={styles.textSmallStyle}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flexDirection: 'column',
  },
  textLargeStyle: {
    fontSize: 40,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Bold',
  },
  textSmallStyle: {
    fontSize: 35,
    marginTop: 20,
    marginBottom: 30,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Regular',
  },
});

export default App;

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

1. Start Metro Bundler

First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command

npx react-native start

Once you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.

2. Start React Native Application

To run the project on an Android Virtual Device or on real debugging device

npx react-native run-android

or on the iOS Simulator by running (macOS only)

npx react-native run-ios

Output Screenshots

This is how you can use custom fonts in React Native for Android and iOS both. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

I hope you liked it. 🙂