Jetpack Compose Tips: How to Change Font

MJ Manaog
2 min readFeb 26, 2021

--

Step 1. Look for your desired font

You may choose any font here in Google Fonts for free.

In this scenario, we will download this supa-friendly font — Quicksand

Step 2. Copy the font’s .ttf file(s)

I will only copy the regular and bold .ttf files for me. (You may copy yours accordingly)

Step 3. Create font folder then paste your fonts

  1. In your app’s res folder, create a new folder named font
  2. Paste your copied fonts
  3. Rename it properly

Step 4. Initialize your font

In your Type.kt file (located at:app/com.example.myapp/ui/theme/Type.kt) above the val Typography initialize your font.

Step 5. Reuse it in Typography

Step 6. Use it in your layout

Output:

Awesome! ✨

Hello, I’m MJ (just a noobie), still learning about Jetpack Compose. I will try to share anything useful that I’ve learned during this process. Leave a clap/comment/suggestions to improve my skills! Thank you :)

--

--