Learn How to Use Custom Font in Android Application

Developing android application is really cool until it’s not. Okay, that was a bad joke. But seriously not all the projects you do can be complete without using some form of custom fonts. So, here is a concise and to the point tutorial on how to use custom font in your Android application.

Before we begin

Before we get started let us first understand how we might go on about it.

There are exactly two ways we are going to look at this tutorials. One is the Google’s way of changing font’s with the fontFamily and the other one is using the library.

We will be looking at both these methods one by one.

And the process is even beginner friendly so there will not be any issues here with the code.

Also Read: How to get current GPS location in Android

TECHENUM

The standard way

Let us first look at the standard way on how to use custom font in android application. There isn’t much to it really.

Google since support library version 26.0 has established something known as downloadable fonts.

You can read about it here, but the official documentation can be quite confusing when you’re just starting with the development.

At this point I assume you already have your project set up. We will be following along from there.

Navigate to one of the TextView in your project. It doesn’t matter where it is, just navigate to the text view. Click it and switch to the design view.

After that on the right hand side, assuming you have the default workspace. There will be a search bar for attributes. Search for fontFamily as shown in the image below.

After that click on drop-down and scroll to the bottom there will be a more fonts item. Once you click on more fonts you will see something as shown below.

In the screen above just select the desired font and hit OK. That’s it we’re almost done, all there’s left is to add it in our styles.xml.

Next open up you styles.xml and find the current theme for your application if you haven’t changed anything then the default will be the something like parent="Theme.MaterialComponents.Light.*".

All you have to do is add the following block

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- you need to add this line in your theme -->
    <item name="fontFamily">@font/font-name</item>
</style>Code language: HTML, XML (xml)

One thing to note in the code above is you have to replace the @font/font-name with the one in the text view’s fontFamily value.

And you’re done changing the font. But this might not always work which is what happened with me.

Also Read : Learn how to use shared preferences in Android

TECHENUM

Using custom font with the library

Hence it brings us to using a library for our needs. Let us look at how to use custom font in android application in a different way.

The library is quite helpful if you want to change fonts for maybe learning purpose or there is something else. It is never bad to learn ways to achieve same tasks differently.

Head over to this GitHub repository if you have any problem regarding the use of this library from my post. But, I have tried to be as clear as possible so that might not be necessary.

Also Read : Learn how to use fileprovider in Android with example

TECHENUM

Including the library

Copy the dependencies below into your app > build.gradle file and sync the project with gradle files. Assuming that you are using AndroidX.

dependencies {
    implementation 'io.github.inflationx:calligraphy3:3.1.1'
    implementation 'io.github.inflationx:viewpump:2.0.3'
}Code language: Groovy (groovy)

Creating assets folder

Before we can continue create a assets folder in your app folder which is located inside the root folder of your project. Put all your fonts into that folder. But make sure you rename the font and make everything lowercase and remove all special characters and spaces.

It is shown in the image below.

Also Read : Learn How To Create Tabs With ViewPager2

TECHENUM

Initializing the library

After we are done implementing the library we must initialize it with our application. If you don’t have an application class ready. Include the code below in the onCreate() { } of your application class.

@Override
public void onCreate() {
    super.onCreate();
    ViewPump.init(ViewPump.builder()
        .addInterceptor(new CalligraphyInterceptor(
                new CalligraphyConfig.Builder()
                    .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf")
                    .setFontAttrId(R.attr.fontPath)
                    .build()))
        .build());
    //....
}Code language: Java (java)

Now that we have successfully initialized our library. The next step we need to take is use it.

Adding the font to project

But first let us include the font in our project. To do this you must copy the font to assets > fonts directory in the app > src > main directory.

If the directory isn’t there just create the directory assets > fonts. You can now access this directory from project view in Android Studio.

Drop whichever font you want to use here. Just make sure to not include spaces and capital letters or special characters in name of the font.

Also Read : How to get current GPS location in Android

TECHENUM

Using the font in XML

There is nothing much you need to do to use the library. Just use the fontPath="fonts/font_name.ttf". Remember the asset > fonts directory we created earlier ?

And example code is provided below for TextView:

<TextView
...
fontPath="fonts/my_font_name.ttf"
... />Code language: HTML, XML (xml)

That’s it you have successfully changed your font.

But note that the attributes bold, italic will not work. And you will have to use a separate font for each.

Generally this will not be any issue because a font has multiple variants of the font.

Also Read : Async Task in Android is Deprecated: There are Better Ways

TECHENUM