How to add custom Font in Android

Google Fonts provide us a wide variety of fonts that can be used to style the text or textView in Android Studio. The proper fonts do not just enhance the user interface, but they also signify and highlight the purpose of the text. In android, you can define your own custom fonts for the strings in your application.

There are mainly three methods to add custom fonts to text in Android Studio. The first two methods involve the use of the Typeface class while the last method is easy. Follow this tutorial to explore all the methods.

Method 1

By creating a new Android resource directory:

  • Step 2: Create the layout in the XML files.
  • Step 3: Now in the MainActivity (certainly the Activity corresponding to the layout file where the TextView to be customized lies), set the typeface for that TextView.

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id=”@+id/textview”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Android Apps\nDevelopment Blogs”
android:textColor=”#F3F3F3"
android:textSize=”40dp”
android:textAlignment=”center”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toTopOf=”parent”/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.codewithgolap.customfonts;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.content.res.ResourcesCompat;

import android.graphics.Typeface;

import android.os.Bundle;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TextView textView = findViewById(R.id.textview);

Typeface typeface = ResourcesCompat.getFont( this, R.font.ranchers_regular);

textView.setTypeface(typeface);

}

}

Output

By creating a new asset folder:

  • Step 2: While we keep the XML layout to be the same as earlier, the Java code of the MainActivity is modified this way.

MainActivity.java

package com.codewithgolap.customfonts;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.content.res.ResourcesCompat;

import android.graphics.Typeface;

import android.os.Bundle;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TextView textView = findViewById(R.id.textview);

Typeface typeface = Typeface.createFromAsset( getAssets(), "caveat_variableFont_wght.ttf");

textView.setTypeface(typeface);

}

}

Output

Method 2

  • Step 1: Download the font of your choice and use either of the above two approaches to store it in the project. I have pasted my file in the assets folder.
  • Step 2: Create a new Java file in the package. Preferably name it according to the font that you want to implement. Here we have created a file named Maxwell.
  • Step 3: Extend the following class in this Java file:

androidx.appcompat.widget.AppCompatTextView

  • Step 4: Complete the Java code by adding the required constructors.
  • Step 5: Create a method in the class wherein the typeface for the font is set.
  • Step 6: Call this method in each constructor. Refer to the following code for a better understanding.

Maxwell.java

package com.codewithgolap.customfonts;

import android.content.Context;

import android.graphics.Typeface;

import android.util.AttributeSet;

public class Maxwell extends androidx.appcompat.widget.AppCompatTextView{

public Maxwell(Context context)

{

super(context);

initTypeface(context);

}

public Maxwell(Context context, AttributeSet attrs)

{

super(context, attrs);

initTypeface(context);

}

public Maxwell(Context context, AttributeSet attrs, int defStyleAttr)

{

super(context, attrs, defStyleAttr);

initTypeface(context);

}

private void initTypeface(Context context)

{

Typeface tf = Typeface.createFromAsset( context.getAssets(), "maxwell_bold.ttf");

this.setTypeface(tf);

}

}

  • Step 7: Now in your XML layout file, use this font class instead of the conventional TextView tag

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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.codewithgolap.customfonts.Maxwell
android:id=”@+id/textview”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Android Apps\nDevelopment Blogs”
android:textColor=”#FFFFFF”
android:textSize=”40dp”
android:textAlignment=”center”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toTopOf=”parent”/>

</androidx.constraintlayout.widget.ConstraintLayout>

Output

Method 3

  • Step 1: Go to the XML file and go to the Design view.
  • Step 2: Click the TextView you want to change the font of.
  • Step 3: In the search bar, search for fontFamily.
  • Step 4: In the dropdown menu, you can check out the fonts available. In case you want to explore more, scroll down and click ‘More Fonts…‘.
  • Step 5: A dialog box pops up. Choose a font of your choice, choose the style you like in the preview, and click OK.
  • Step 6: This would create a downloadable font and add it automatically to your project
  • The following files automatically get added to your project:
  • Step 7: Now the XML file will look like:

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id=”@+id/textview”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:fontFamily=”@font/bangers”
android:text=”Android Apps\nDevelopment Blogs”
android:textAlignment=”center”
android:textColor=”#FFFFFF”
android:textSize=”40dp”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toTopOf=”parent” />

</androidx.constraintlayout.widget.ConstraintLayout>

Output

Hi everyone, myself Golap an Android app developer with UI/UX designer.