How to add Custom Fonts in Android

22 Aug, 2021
Google Fonts provide a wide variety of fonts that can be used to style the text in Android Studio. Appropriate fonts do not just enhance the user interface but they also signify and emphasize the purpose of the text. There are majorly 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 quite direct and easy. Follow the entire article to explore all the methods.
In this method, we’ll first download the font’s ttf file from the internet and then use them as an asset or a resource to set the Typeface. You may find the downloadable fonts here. Here Dancing Script font is used. Once you download the fonts of your choice, unzip the folder and copy the font file.
By creating a new Android resource directory:
Step 1: In the project’s resource folder, create a new Android Resource Directory of Resource type: font and paste this ‘ttf’ file here. Note that while pasting it, keep in mind that a resource file’s name can consist of lower-case letters and underscores only, so refactor the file accordingly.
Step 2: Create the layout in the XML files.
Step 3: Now in the MainActivity(necessarily the Activity corresponding to the layout file where the TextView to be customised lies), set the typeface for that TextView.activity_main.xmlMainActivity.javaactivity_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">      <TextView        android:id="@+id/textview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        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.javapackage com.example.android.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.dancing_script_bold);        textView.setTypeface(typeface);    }}
activity_main.xml
MainActivity.java
<?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">      <TextView        android:id="@+id/textview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"/>  </androidx.constraintlayout.widget.ConstraintLayout>
package com.example.android.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.dancing_script_bold);        textView.setTypeface(typeface);    }}
Output:
By creating a new asset folder:
Step 1: Create a new asset folder(app/New/Folder/Asset folder) in Android Studio and paste the ‘ttf’ file of the font here. The picture on the left shows how to add the assets folder to the project whereas the picture on the right shows the added ‘ttf’ file to it.
Step 2: While we keep the XML layout to be same as earlier, the Java code of the MainActivity is modified this way.MainActivity.javaMainActivity.javapackage com.example.android.customfonts;  import androidx.appcompat.app.AppCompatActivity;import androidx.core.content.res.ResourcesCompat;import android.graphics.Typeface;import android.os.Bundle;import android.widget.TextView;import com.example.android.customfonts.R;  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(),            "macondo_swash_caps_regular.ttf");        textView.setTypeface(typeface);    }}
MainActivity.java
package com.example.android.customfonts;  import androidx.appcompat.app.AppCompatActivity;import androidx.core.content.res.ResourcesCompat;import android.graphics.Typeface;import android.os.Bundle;import android.widget.TextView;import com.example.android.customfonts.R;  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(),            "macondo_swash_caps_regular.ttf");        textView.setTypeface(typeface);    }}
Output:
In this method we’ll create a separate java class dediacted to a particular font and use this class instead of the conventional TextView tag in the XML file.
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 CalligraffittiRegular.
Step 3: Extend the following class in this Java file:androidx.appcompat.widget.AppCompatTextView
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.CalligraffittiRegular.javaCalligraffittiRegular.javapackage com.example.android.customfonts;  import android.content.Context;import android.graphics.Typeface;import android.util.AttributeSet;  public class CalligraffittiRegular extends         androidx.appcompat.widget.AppCompatTextView {      public CalligraffittiRegular(Context context)    {        super(context);        initTypeface(context);    }      public CalligraffittiRegular(Context context,                                 AttributeSet attrs)    {        super(context, attrs);        initTypeface(context);    }      public CalligraffittiRegular(Context context,                                 AttributeSet attrs,                                 int defStyleAttr)    {        super(context, attrs, defStyleAttr);        initTypeface(context);    }      private void initTypeface(Context context)    {        Typeface tf = Typeface.createFromAsset(            context.getAssets(),            "calligraffitti_regular.ttf");        this.setTypeface(tf);    }}
CalligraffittiRegular.java
package com.example.android.customfonts;  import android.content.Context;import android.graphics.Typeface;import android.util.AttributeSet;  public class CalligraffittiRegular extends         androidx.appcompat.widget.AppCompatTextView {      public CalligraffittiRegular(Context context)    {        super(context);        initTypeface(context);    }      public CalligraffittiRegular(Context context,                                 AttributeSet attrs)    {        super(context, attrs);        initTypeface(context);    }      public CalligraffittiRegular(Context context,                                 AttributeSet attrs,                                 int defStyleAttr)    {        super(context, attrs, defStyleAttr);        initTypeface(context);    }      private void initTypeface(Context context)    {        Typeface tf = Typeface.createFromAsset(            context.getAssets(),            "calligraffitti_regular.ttf");        this.setTypeface(tf);    }}
Step 7: Now in your XML layout file, use this font class instead of of the conventional TextView tag.activity_main.xmlactivity_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">      <com.example.android.customfonts.CalligraffittiRegular        android:id="@+id/textview1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.616"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.462"/>  </androidx.constraintlayout.widget.ConstraintLayout>
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">      <com.example.android.customfonts.CalligraffittiRegular        android:id="@+id/textview1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.616"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.462"/>  </androidx.constraintlayout.widget.ConstraintLayout>
Output:
With Android 8.0 (API Level 26) a simpler method was introduced for using fonts as a resource in Android Studio. The android:fontFamily attribute of the TextView class is used to specify the font.
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:
The following files automatically get added to your project:
Step 7: Now the XML file will be look like:activity_main.xmlactivity_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:layout_width="wrap_content"        android:layout_height="wrap_content"        android:fontFamily="@font/aref_ruqaa"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />  </androidx.constraintlayout.widget.ConstraintLayout>
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:layout_width="wrap_content"        android:layout_height="wrap_content"        android:fontFamily="@font/aref_ruqaa"        android:text="GeeksforGeeks"        android:textColor="#006600"        android:textSize="50dp"        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:
ConclusionWhile the last method seems easy and time-saving, however, it bundles the extra files with the APK of the app which might increase its size. Though this also ensures that the fonts are present even when the app works offline. The first method results in a smaller sized APK but the user might need access to the internet while the processing of the app if some other already present app does not have the same font stored in its cache.
sagartomar9927
android
How To
Java
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Set Git Username and Password in GitBash?
How to Permanently Disable Swap in Linux?
How to Install Jupyter Notebook on MacOS?
How to Import JSON Data into SQL Server?
How to Install and Use NVM on Windows?
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
For-each loop in Java
Reverse a string in Java