How to Add Custom Fonts in React Native

October 04, 2021 Publish By : EXPERT APP DEVS 4 min read Viewed By : 758
add custom fonts in react native

Learn All About React Native Custom Font implementation From Here.

Here we are going to discuss how we use the custom fonts in react native. Nowadays the React native market has increased and React Native India company has preferred to hire developers with smart skills. And this is a part of custom react native development.

How to Add Custom Fonts in React Native

About React Native Custom Font - 

In this example, we learn how to use Custom Fonts in React Native for Android and iOS. After seeing this there are some questions which come to mind,

  1. Where can we find custom fonts
  2. Steps to download custom fonts 
  3. Import in Android and iOS 
  4. And the code sample 

At this time Icons and fonts are very important in any app. If you want attractive icons then you also need attractive fonts to make it perfect. You can see many applications using custom fonts nowadays. If you like to use the custom font in your React Native app then you can continue with this tutorial.
Implementing the custom fonts in React native, You don't need any external library for it, so for a complete picture let’s start the tutorial.

Step 1 - 

For implementing this first we need to create a react native project by using CLI.
react-native init ProjectName

Step 2 - 

Now we need to download the fonts from google fonts or anywhere you want but you have the custom fonts in this step.
You find the google fonts -  google fonts.

Step 3 - 

Now you have the fonts which you want to integrate in your react native app, you get the fonts in zip. format now you need to unzip it and then add that font in the app folder.
Now you need to create a fonts folder in your src/assets. After Creating the folder you need to add font files here.

create a fonts folder

Step 4 -

 Now we need to export the fonts and for this, we need to create a file with the name of  react-native.config.js at the root of your app and add the path of the fonts folder here.

react-native config

Step 5 -

So now we need to link that folder for both platforms, so you need to run the following command in your CLI.
 npx react-native link 
This command adds font files into the assets folder in the android folder of your app and to info.plist file in your iOS folder. 

Step 6 - Adding Resources To Your iOS Folder

you need to do one more step for it to work in iOS, do these steps

  • The select target of your app in Xcode, 
  • Select the Build Phases tab, 
  • Now you need to add font files in the "Copy Bundle Resources" Section

Copy Bundle Resources section 

Step 7 - Adding Resources To Your Android

In android it works fine you can check it.

Step 8 - Complete code for react native app - 

// 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}>

            Custom Fonts

        </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;
 
Using Custom Fonts in React Native- 

Once you will add custom fonts on your project that you are ready to use that font in your project you just need to set fontFamily prop in Style.
Like - //Below is the custom font
fontFamily: 'DancingScript-Bold',
So the tutorial is completed now, if you have any queries regarding this article please comment and do like to share
Happy Learning

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.