Enhancing Your React Native App: A Guide to Custom Fonts

Introduction πŸ‘‹πŸΏπŸ‘‹πŸΏπŸ‘‹πŸΏ

Welcome to this interesting series on "Enhancing Your React Native App." πŸŽ‰πŸŽ‰. In the last article, we saw what was needed for a developer interested in building mobile apps using React Native. We also saw that React Native could be used to build cross-platform applications. As we continue to build interesting mobile apps, we seek ways to elevate our creations' visual appeal and user experience.

Why use custom fonts in apps? 🀷🏿🀷🏿🀷🏿

In building mobile apps, understanding how to implement custom fonts in our apps can greatly enhance the aesthetics and branding of our apps. Using custom fonts in our apps infuses personality, professionalism, and style into our interfaces, elevating them to exceptional.

In this article, we will learn how to use custom fonts to make our app visually captivating and leave a lasting impression on the users.

Exploring resources for custom fonts πŸ“’πŸ‘¨πŸΏβ€πŸ’»

Here is a list of websites where you can find custom fonts for your personal or commercial projects:

Using custom fonts in our React Native app πŸ”‘πŸ” 

Getting started with React Native Guide will help us set up your machine for React Native.

After setting up our machine for React Native, the following steps will help us achieve our objective:

PS: The device you are using matters when developing React Native applications. For this article, I am using an Apple Mac device.

  1. Uninstall any previously installed global react-native-cli package

     npm uninstall -g react-native-cli @react-native-community/cli
    
  2. Run the command to create a new React Native project

     npx react-native init RNFonts
    

    Navigate into the app directory:

     cd RNFonts
    
  3. Download the fonts we need. For this example project, we will be using selected fonts from some of the resources above:

    Iceberg - 1001Fonts

    Orange Juice - 1001Fonts

    Gravity Sucks - FFonts

    Protest Revolution - Google fonts

    PS: Ensure that the downloaded fonts are in the.ttfformat.

Importing custom fonts in Android

To use the custom fonts on an Android device,

  1. Navigate to the main directory:

     cd ./android/app/src/main
    
  2. Create a directory called assets/fonts

     mkdir assets/fonts
    

    You should have something like this:

  3. Move all the custom fonts to the assets/fonts folder

    Ensure that you rename the files into a name of your choice, e.g. I renamed the orange-juice 2.0 into orange-juice.

    It should look like this:

  4. Our font is ready to use on your Android device.

Importing custom fonts in iOS

To use custom fonts in our iOS devices, we'll follow the steps below

  1. Navigate to the iOS directory/folder and create a directory/folder called fonts

     cd ios/
     mkdir fonts
    
  2. Let's copy our downloaded fonts into the fonts directory. Ensure they have the same name as we used in the case of Android.

    We should have this:

  3. Next, we open the RNFonts.xworkspace file using Xcode.

  4. After opening this project on Xcode, on the left-hand side, we click on the project name and select the option "Add files to RNFonts".

    We should have something like this:

  5. Next, we select the fonts directory that we have created. Remember to select Create Folder references from below and click Add

  6. Next, we click the project name - RNFonts on the left top, and select the project name on TARGETS. Click the Info tab on the top menu to see Info.plist. When you hover over the properties in the Info.plist file, we will see a "plus" button and add "Fonts provided by application" and font files to the Info.plistfile.

    After adding it we should have this:

    Or we can just navigate to the Info.plist file in the directory ios/RNFonts/Info.plist on our VSCode and add the font files directly into it.

  7. Our fonts should be ready to use on an iOS device.

PS: For Orange juice font, it might not display on iOS devices. If we try to use the name that came with the file, i.e.,orange juice 2.0.ttfor the name we later gave the fileorange-juiceit will not still work. This is because iOS uses the "postscript" name of the font.
For me, one of the quick ways to find this out is to check out the name on the iOS font book or better still install the font. Once we install the font, the name of the font is the "postscript" name of that font. For example, after installing theorange juice 2.0.ttfthe font we can see from the image below that the "postscript" name isorange juice

Testing our custom fonts on both Android and iOS

  1. Jump into the project folder, and open it on VSCode

     cd RNFonts
     code .
    
  2. Open the App.tsx file and replace the content with this:

     import React from 'react';
     import {Linking, Pressable, StyleSheet, Text, View} from 'react-native';
    
     const App = () => {
       return (
         <View style={styles.container}>
           <Pressable onPress={() => Linking.openURL('https://ffonts.net/Gravity-Sucks1.font#')}>
             <Text style={[styles.gravity, styles.universal]}>Gravity Sucks Font</Text>
           </Pressable>
           <Pressable onPress={() => Linking.openURL('https://www.1001freefonts.com/iceberg-font-52000.font')}>
             <Text style={[styles.iceberg, styles.universal]}>Iceberg Font</Text>
           </Pressable>
           <Pressable onPress={() => Linking.openURL('https://www.1001freefonts.com/orange-juice.font')}>
             <Text style={[styles.orangeJuice, styles.universal]}>Orange Juice Font</Text>
           </Pressable>
           <Pressable onPress={() => Linking.openURL('https://fonts.google.com/specimen/Protest+Revolution')}>
             <Text style={[styles.protestRev, styles.universal]}>Protest Revolution Font</Text>
           </Pressable>
         </View>
       );
     };
    
     export default App;
    
     const styles = StyleSheet.create({
       container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
       },
       universal: {
         marginVertical: 10,
         fontSize: 35,
         color: 'black',
       },
       gravity: {
         fontFamily: 'GravitySucks',
       },
       iceberg: {
         fontFamily: 'Iceberg',
       },
       orangeJuice: {
         fontFamily: 'orange juice',
       },
       protestRev: {
         fontFamily: 'ProtestRevolution-Regular',
       },
     });
    
  3. Start our Metro bundler πŸ’¨πŸ’¨πŸ’¨

    For us to run our project, we need to start the Metro bundler using the command below:

     npm run start
    
  4. Starting our Android application

    To start our Android application, we use the command below to start our application:

     npx react-native run-android
    

    Here is the output of our application on an Android device

  5. Starting our iOS application

    To run our application on iOS, we run the command below:

     npx react-native run-ios
    

    Here is the output of our application on the iOS simulator

And we have come to the end of this article on using custom fonts. If you have a challenge following the steps, you can ask your questions in the comment box.βœ…βœ…

To receive an update when the article drops, do well to subscribe to my newsletter or follow me on any of the social media platforms.

Twitter 🐦: @nwokporo_ebuka

LinkedIn ⚑: @chukwuebuka_nwokporo

GitHub πŸš€: @ebukvick

Hashnode πŸ“—: Nwokporo Chukwuebuka

12
Subscribe to my newsletter

Read articles from Nwokporo Chukwuebuka directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Nwokporo Chukwuebuka
Nwokporo Chukwuebuka

I'm a developer, who is keen about building solutions in the web. I love to read and write articles.