Change react native app font-family

Change font-family of React-native Application

Hi guys, In this article, we are going to learn about how to change the font-family of text also change whole application font using react-native-global-font. It is important for the developers to make clean and nice-looking design their App, and app font is one of the important things in designing UI, In this article, we learn about Change react native app font family so for this, we need to set default global font for our App to do this I have download the font AbrilFatface-Regular.ttf 

1. Add font in the assets folder

For Android, you need to create assets folder in path android\app\src\main\assets\fonts like below:

If you are using React-native <0.60.0 then add the following line in Package.json 

"rnpm": {
  "assets": [
    "./assets/fonts"
  ]
}

If you are using react-native >0.60.0 then it will give and error so you need to create react-native.config.js file in Project root folder and add following code in that file:

module.exports = {
    project: {
      ios: {},
      android: {}, // grouped into "project"
    },
    assets: ["./assets/fonts/"], // stays the same
  };

For iOS, you need to create assets for in Project root directory like below:

Also, you need to add info.plist and add a font in Resources folder in iOS

<key>UIAppFonts</key>
<array>
  <string>AbrilFatface-Regular.ttf</string>
</array>

2. Install Global font library

To assign font-family to whole Application you need to install the following library

npm install --save react-native-global-font

3. Import the following components

import GlobalFont from 'react-native-global-font'

4. Use GlobalFont

Add the following lines in componentDidMount() method

componentDidMount() {
    let fontName = 'AbrilFatface-Regular'
    GlobalFont.applyGlobal(fontName)
}

This will change font-family in-app sometime we need to assign font-family like fontFamily: ‘AbrilFatface-Regular’ in text style, let’s see in below code

5. Home.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,StatusBar} from 'react-native';
import GlobalFont from 'react-native-global-font'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//Define a color for toolbar
global.backgroundColor = '#176abf';


export default class Home extends Component {


  componentDidMount() {
    let fontName = 'AbrilFatface-Regular'
    GlobalFont.applyGlobal(fontName)   //<------- Added font family golbally 
 }

  render() {
    return (
      <View style={styles.container}>
    
        <Text style={styles.welcome}>Welcome to Home!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 35,
    textAlign: 'center',
    margin: 10,
    fontFamily: 'AbrilFatface-Regular',   //<------ Added font family for perticular text
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontFamily: 'AbrilFatface-Regular',  //<------ Added font family for perticular text  
    fontSize: 16,
  },
});

This will reflect font-family on ActionBar as to know more about NavigationOptions I request you to see this post you will get full idea about Navigation drawer, Let’s see the output

Output:

As we see in above screenshots font-family in all project is changed, I have created an app with a react-navigation drawer to see this whole project please check this post

Thank you… happy coding… 🙂