How to add Custom Fonts in your Android app using Kotlin

Today, I’m going to show you how to add custom fonts in your Android app easily.

In this example, we are going to add 3 fonts, Mallent (mallent_regular.ttf), Great Wishes (best.otf), and the popular Bebas Neue (bebas_neue) in different styles and weights (thin, regular, bold).

Adding Custom Fonts

In your project, create a new folder font by going Right-Click on the res folder New > Android Resource Directory.

Give the name font as Directory name and Resource type, and press OK.

Drag and Drop your custom fonts inside the font folder and press OK on the new window.

Note: Don’t forget that font files name needs to be in lowercase and use underscore ( _ ) as a space.

After that, your font folder will look like this:

Using Custom Fonts

Go to your Activity‘s file and add your custom font like this:

class MainActivity: AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) myTextView.typeface = ResourcesCompat.getFont(this, R.font.best) myTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 50.toFloat()) } }
Code language: Kotlin (kotlin)

Creating a Custom Font family

If you have a font that differs from each other in style such as the weight (thin, regular, bold e.t.c), you can add them together in an XML file.

Right-Click on the font folder New > Font resource file

On the new window, give a name for your font family XML file, in this example called bebas_neue_font_family, and press OK.

In the XML file add your fonts like that:

<?xml version="1.0" encoding="utf-8"?> <font-family xmlns:android="http://schemas.android.com/apk/res/android"> <!-- fontWeight 100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold --> <font android:font="@font/bebas_neue_thin" android:fontStyle="normal" android:fontWeight="100" /> <font android:font="@font/bebas_neue_regular" android:fontStyle="normal" android:fontWeight="400" /> <font android:font="@font/bebas_neue_bold" android:fontStyle="normal" android:fontWeight="700" /> </font-family>
Code language: HTML, XML (xml)

If you are using support library, change the android: to app:, like this:

<?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"> <!-- fontWeight 100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold --> <font app:font="@font/bebas_neue_thin" app:fontStyle="normal" app:fontWeight="100" /> <font app:font="@font/bebas_neue_regular" app:fontStyle="normal" app:fontWeight="400" /> <font app:font="@font/bebas_neue_bold" app:fontStyle="normal" app:fontWeight="700" /> </font-family>
Code language: HTML, XML (xml)

Using a Custom Font Family

You can use the font family only on XML files, like Activity‘s XML and styles’ XML. You can’t use them programmatically.

Go to your TextView in your Activity‘s layout and add the attributes android:fontFamily and android:textFontWeight, like that:

<TextView android:id="@+id/myTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="50sp" android:textColor="@android:color/white" android:fontFamily="@font/bebas_neue_font_family" android:textFontWeight="900" android:text="Text"/>
Code language: HTML, XML (xml)

And again, if you are using support library, change it from android: to app: but textFontWeight only works for API 28 and above.

<TextView android:id="@+id/myTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="50sp" android:textColor="@android:color/white" app:fontFamily="@font/bebas_neue_font_family" android:textFontWeight="900" android:text="Text"/>
Code language: HTML, XML (xml)
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Get once a week my latest tutorials right in your inbox

Check your inbox to confirm your email