Custom Fonts as Resources – Coding in Flow

In this tutorial, we will learn how to add custom fonts as resources into our Android Studio project. Unlike downloadable fonts, these local fonts are bundled with the APK and always available offline.
We will also learn how we can bundle multiple fonts together into one font-family XML file, where we can specify a fontStyle and fontWeight for each font file, and let the system apply it to a TextView automatically in accordance to its textStyle (italic or bold).
By adding the fontFamily attribute to the AppTheme instead of a single TextView, we can apply a font application-wide, and by using it on a Toolbar theme, we can change the font of the Toolbar specifically.
We can also change the font of a TextView dynamically in Java code, by creating a Typeface object with getResources().getFont() or the ResourcesCompat compatibility version, and applying this Typeface to a TextView with setTypeface.
Custom fonts are backward compatible down to API level 16 over the AppCompat support library. On API 28 and higher, we can specify the font weight directly over the Typeface.create method or the textFontWeight XML attribute.
Supported font resources are ttf and otf files. We can access the free Google Fonts library directly over the Android Studio Design Editor.

Show less

activity_main.xmltoolbar.xmlsimonetta.xmlstyles.xmlMainActivity.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:fontFamily="@font/simonetta"
        android:text="Hello World!"
        android:textSize="30sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/simonetta"
        android:text="Hello World!"
        android:textSize="30sp"
        android:textStyle="italic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/simonetta"
        android:text="Hello World!"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/simonetta"
        android:text="Hello World!"
        android:textSize="30sp"
        android:textStyle="bold|italic" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ToolbarThemeOverlay"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar>

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        app:font="@font/simonetta_regular"
        app:fontStyle="normal"
        app:fontWeight="400" />
    <font
        app:font="@font/simonetta_italic"
        app:fontStyle="italic"
        app:fontWeight="400" />
    <font
        app:font="@font/simonetta_black"
        app:fontStyle="normal"
        app:fontWeight="700" />
    <font
        app:font="@font/simonetta_black_italic"
        app:fontStyle="italic"
        app:fontWeight="700" />
</font-family>

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/simonetta</item>
    </style>

    <style name="ToolbarThemeOverlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:fontFamily">@font/architects_daughter</item>
    </style>
    
</resources>

package com.codinginflow.fontsexample;

import android.graphics.Typeface;
import android.support.v4.content.res.ResourcesCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final TextView textView = findViewById(R.id.text_view_1);
        final Typeface typeface = ResourcesCompat.getFont(this, R.font.architects_daughter);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setTypeface(typeface);
            }
        });
    }
}