Today’s tutorial will teach us how to apply a custom font in KMP Kotlin Compose Multiplatform using CommonMain Shared resources. This is a step-by-step tutorial guide for both Android & iOS applications. We will use a single font family TTF file, which will be shared throughout the application.
Set Common Custom Font in KMP Kotlin Compose Multiplatform Text
In Kotlin Compose Multiplatform, we can use Shared resources such as images, Text String files, and fonts. These static resource files are shared across the app, and we can directly use them using the common Main shared code. We must write a single code that will work for Android and iOS. As we all know, There are a ton of Font styles available on the internet, and customized font styles are a great way to enhance the design of our application. To set up a custom font in our KMP app, we have to make a few changes to our project. So let’s get started.
1. Open your KMP Compose Multiplatform project and Goto
composeApp -> commonMain -> composeResource.
2. In composeResource, create a folder named the font. Then, put your custom font TTF files in that folder. As you have seen in the below screenshot.
3. Now you have to Rebuild the project. This is a mandatory step.
4. Applying custom font on Text using the FontFamily property of text. The import of Res will be automatically generated after rebuilding the project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Text( text = "Sample Text 1 with Custom Font.", style = TextStyle( fontSize = 28.sp, fontFamily = FontFamily( Font(Res.font.PoppinsRegular) ), ), modifier = Modifier .padding(16.dp) .wrapContentSize(), textAlign = TextAlign.Center, ) |
Complete source code for App.kt file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.jetbrains.compose.resources.Font import testapp.composeapp.generated.resources.DancingScript import testapp.composeapp.generated.resources.PoppinsRegular import testapp.composeapp.generated.resources.Res @Composable fun App() { MaterialTheme { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) .padding(8.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { SampleStyleText() } } } @Composable fun SampleStyleText() { Text( text = "Sample Text 1 with Custom Font.", style = TextStyle( fontSize = 28.sp, fontFamily = FontFamily( Font(Res.font.PoppinsRegular) ), ), modifier = Modifier .padding(16.dp) .wrapContentSize(), textAlign = TextAlign.Center, ) Text( text = "Sample Text 2 with Custom Font.", style = TextStyle( fontSize = 28.sp, fontFamily = FontFamily( Font(Res.font.DancingScript) ), ), modifier = Modifier .padding(16.dp) .wrapContentSize(), textAlign = TextAlign.Center, ) } |
Screenshot in Android device:
Screenshot in iOS device:
