Using Custom Font in Android

Android provides various font styles in android studio to help the developers make their app or game more attractive, but if you want to add some unique font to your application, a custom font which is not available in Android Studio by default, then how will you do it?

To do so in android studio we mainly have 3 methods and we will add the custom font one by one using all the 3 methods as shown below. So before jumping to the methods used to add a custom font, firstly we have to download any custom font file (which we will use in our app), which is generally a .ttf file. For this tutorial, we will be using the FFF-Tusj (Download now) font file or you can download any .ttf file you want.

Note: Before going to the below 3 methods or techniques, firstly we have to create an android project with empty activity, containing all the basic files and resources.

Add Custom Font - 1st Approach

You have to follow some basic steps to add custom font using to your android project:

First, we will create a new Android Resource Directory. To do so, right click on app -> res and select New -> Android Resource Directory and create a Resource type of font and click OK.
Now extract the FFF-Tusj zip file and inside the FFF-Tusj folder, you will find the fff_tusj.ttf file. Copy and paste the file inside the app -> res -> font folder (you can paste as many font files as you want in your project)

Open the activity_main.xml file and remove the default android generated code and create a RelativeLayout and inside the relative layout add a simple TextView and create an id for the text view, which we will use in step 4.

<TextView
    android:layout_marginLeft = "16dp"
    android:layout_marginRight = "16dp"
    android:textColor = "#FF5722"
    android:layout_centerInParent = "true"
    android:foregroundGravity = "center_horizontal"
    android:gravity = "center_horizontal"
    android:text = "Hello World"
    android:textSize = "32dp"
    android:id = "@+id/customFont"
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"/>

The complete code of activity_main.xml file is shown below:

<?xml version = "1.0" encoding =  "utf-8" ?>
<RelativeLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

    <TextView
        android:layout_marginLeft = "16dp"
        android:layout_marginRight = "16dp"
        android:textColor = "#FF5722"
        android:layout_centerInParent = "true"
        android:foregroundGravity = "center_horizontal"
        android:gravity = "center_horizontal"
        android:text = "Hello World"
        android:textSize = "32dp"
        android:id = "@+id/customFont"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

</RelativeLayout>

Now open the MainActivity.java file and import the libraries as shown below:

//import the basic library 
import android.graphics.Typeface;
import android.os.Bundle ;
import android.widget.TextView;
import androidx.core.content.res.ResourcesCompat;

Inside the onCreate() method creates the instance of the TextView and create a Typeface object and set it to the TextView as shown below:

//creating and initializing the TextView object 
TextView customFontTextView = ( TextView ) findViewById( R.id.customFont);

//creating typeface and getting the font from the font directory 
Typeface typeface = ResourcesCompat.getFont( MainActivity.this, R.font.fff_tusj );

//setting typeface to textview 
customFontTextView.setTypeface( typeface );

The complete code of MainActivity.java file is shown below:

package com.studytonight.project ;

//import the basic library
import android.graphics.Typeface;
import android.os.Bundle ;
import android.widget.TextView;
import androidx.core.content.res.ResourcesCompat;

import androidx.appcompat.app.AppCompatActivity ;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );

        //creating and initializing the TextView object
        TextView customFontTextView = ( TextView ) findViewById( R.id.customFont);

        //creating typeface and getting the font from the font directory
        Typeface typeface = ResourcesCompat.getFont( MainActivity.this, R.font.fff_tusj );

        //setting typeface to textview
        customFontTextView.setTypeface( typeface );
    }

}

Note: The output of all the 3 techniques is the same as we are doing the same thing but in different ways.

By Adding Custom Font Class:

To add custom font by creating a class for the custom font, follow the following steps:

Firstly we create a new folder to do so, right-click on the app and select New -> Folder -> Assets Folder and create an assets folder.
Now copy past the fff_tusj.ttf which we have extracted in method 1 inside the app -> assets folder (you can paste as many text files you want in your project in the asset folder)
In this, we will be creating a new Java class for the custom font by right-clicking on app -> java -> com.studytonight.project -> New -> java class and name the class according to your need (we are creating MyCustomFont class for this tutorial)

Now extend the MyCustomFont to AppCompatTextView and create 3 constructors inside the MyCustomFont class as shown below:

//constructor with 1 parameter
public MyCustomFont( @NonNull Context context ) {
    super( context );
}

//constructor with 1 parameter
public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs ) {
    super( context, attrs);
}

//constructor with 1 parameter
public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs , int defStyleAttr ) {
    super( context, attrs , defStyleAttr );
}

Now inside the MyCustomFont we create a method private void setTheTypeface(Context context) and inside the method we create and set the Typeface as shown below:

private void setTheTypeface( Context context )
{
    Typeface typeface = Typeface.createFromAsset(context.getAssets() , "fff_tusj.ttf" );
        this.setTypeface( typeface );
}

Now call the setTheTypeface() method inside all the constructors as shown below

 public MyCustomFont( @NonNull Context context ) {
        super( context );
        //calling setTheTypeface Function
        setTheTypeface( context );
    }


    public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs ) {
        super( context, attrs);
        //call the  setTheTypeface Function
        setTheTypeface( context );
    }


    public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs , int defStyleAttr ) {
        super( context, attrs , defStyleAttr );
        //calling the setTheTypeface Function
        setTheTypeface( context );
    }

Now the work of MyCustomFont class is down and the Complete Code of MyCustomFont.java is shown below

package com.studytonight.project;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatTextView;

class MyCustomFont extends AppCompatTextView {

    //constructor with 1 parameter
    public MyCustomFont( @NonNull Context context ) {
        super( context );
        //calling setTheTypeface Function
        setTheTypeface( context );
    }

    //constructor with 2 parameter
    public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs ) {
        super( context, attrs);
        //call the  setTheTypeface Function
        setTheTypeface( context );
    }

    //constructor with 3 parameter
    public MyCustomFont( @NonNull Context context,  @Nullable AttributeSet attrs , int defStyleAttr ) {
        super( context, attrs , defStyleAttr );
        //calling the setTheTypeface Function
        setTheTypeface( context );
    }

    private void setTheTypeface( Context context )
    {
        Typeface typeface = Typeface.createFromAsset(context.getAssets() , "fff_tusj.ttf" );

        this.setTypeface( typeface );
    }
}

Now go to activity_main.xml file and remove the default layout and add a relative layout and inside the relativelayout add the com.studytonight.project.MyCustomFont as shown below:

 <com.studytonight.project.MyCustomFont
       android:layout_marginLeft = "16dp"
       android:layout_marginRight = "16dp"
       android:textColor = "#FF5722"
       android:layout_centerInParent = "true"
       android:foregroundGravity = "center_horizontal"
       android:gravity = "center_horizontal"
       android:text = "Hello World"
       android:textSize = "32dp"
       android:id = "@+id/customFont"
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"/>

Now the method 2 is completed and the complete code of activity_main.xml file is shown below

<?xml version = "1.0" encoding =  "utf-8" ?>
<RelativeLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

   <com.studytonight.project.MyCustomFont
       android:layout_marginLeft = "16dp"
       android:layout_marginRight = "16dp"
       android:textColor = "#FF5722"
       android:layout_centerInParent = "true"
       android:foregroundGravity = "center_horizontal"
       android:gravity = "center_horizontal"
       android:text = "Hello World"
       android:textSize = "32dp"
       android:id = "@+id/customFont"
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"/>

</RelativeLayout>

Using fontFamily property - Simplest Method:

This is the simplest method to add custom font in our android app,

In this technique, we will follow the first 2 steps of the method 1, which means we first add the font .ttf file inside the font folder.

Then open the activity_main.xml file and remove the default code and add the relative layout and inside it we add the simple TextView and add the fontFamily property to it as shown below:

android:fontFamily="@font/fff_tusj"

Now our TextView looks like:

<TextView
       android:fontFamily = "@font/fff_tusj"
       android:layout_marginLeft = "16dp"
       android:layout_marginRight = "16dp"
       android:textColor = "#FF5722"
       android:layout_centerInParent = "true"
       android:foregroundGravity = "center_horizontal"
       android:gravity = "center_horizontal"
       android:text = "Hello World"
       android:textSize = "32dp"
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"/>

And we are done, yes that's it, and the complete code of activity_main.xml file is shown below:

<?xml version = "1.0" encoding =  "utf-8" ?>
<RelativeLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">

   <TextView
       android:fontFamily = "@font/fff_tusj"
       android:layout_marginLeft = "16dp"
       android:layout_marginRight = "16dp"
       android:textColor = "#FF5722"
       android:layout_centerInParent = "true"
       android:foregroundGravity = "center_horizontal"
       android:gravity = "center_horizontal"
       android:text = "Hello World"
       android:textSize = "32dp"
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"/>

</RelativeLayout>

Output for Custom font:

The output of the app is the same for all the above 3 methods:

And with this, now you can use any new font that you like in your Android app.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Using Custom Font in Android

Add Custom Font - 1st Approach

By Adding Custom Font Class:

Using fontFamily property - Simplest Method:

Output for Custom font: