How to use Custom Fonts with Jetpack Compose

Last updated on: August 2, 2022

In this tutorial, we are going to add custom fonts to our Jetpack Compose app.

The fonts that we’re gonna use are Mallent (mallent_regular.ttf), Great Wishes (best.otf), and the popular Bebas Neue (bebas_neue) in different styles and weights (thin, regular, and bold).

Adding Custom Fonts

In your project, go to the res folder and right-click and select New > Android Resource Directory

In the Directory name field give the name font and in Resource Type select font, and press OK.

Drag and drop to move (not copy) the font files into the font folder.

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

And in the new window, press Refactor.

After you finished, the font folder will look like this:

Using Custom Fonts

When we create a new compose app, Android Studio creates a folder called ui, and inside there, there’s another folder called theme.

In this folder, you’ll find a file called Type.kt.

This is where we’re going to set our fonts to use later in our app.

If you don’t have this file. Don’t worry.

Go to your project, right-click and select New > Kotlin Class/File. Then select File and give it a name (e.g Type) and press Enter.

Now, inside this file, set the font using the Font function:

// ...

val best = FontFamily(Font(R.font.best))Code language: Kotlin (kotlin)

Next, go to a your file you want to use the custom font (e.g MainActivity.kt):

// ...

Column(
modifier = Modifier
.fillMaxSize()
.background(colorResource(id = R.color.colorPrimary))
.wrapContentSize(Alignment.Center)
.padding(padding)
) {

    Text("Text", fontFamily = best, fontSize = 50.sp, color = Color.White)

}

// ...Code language: Kotlin (kotlin)

Using a Custom Font Family

To set a font family, go to the Type.kt file again and create a list of Fonts by setting the font files and their weight as parameters:

// ...

val bebasNeueFamily = FontFamily(
    Font(R.font.bebas_neue_thin, FontWeight.Thin),
    Font(R.font.bebas_neue_regular, FontWeight.Normal),
    Font(R.font.bebas_neue_bold, FontWeight.Bold),

    // If you have a font like bold italic, you can add it like that
    //Font(R.font.MY_BOLD_ITALIC_FONT_NAME, FontWeight.Bold, FontStyle.Italic),
)Code language: Kotlin (kotlin)

And now you can use it like that:

// ...

Column(
modifier = Modifier
.fillMaxSize()
.background(colorResource(id = R.color.colorPrimary))
.wrapContentSize(Alignment.Center)
.padding(padding)
) {
       Text("Text", fontFamily = bebasNeueFamily, fontWeight = FontWeight.Bold, fontSize = 50.sp, color = Color.White)
}Code language: Kotlin (kotlin)

You can find the final project here

If you have any questions, please feel free to leave a comment below