I recently needed to use a custom font for my Compose multiplatform project Sync Sphere and I thought I'd share my solution in case it was helpful to anyone else.
First, we need to add a font to commonMain/resources/font
For this example, I have gone with dancingscript_regular.ttf The resource name should follow android resource conventions and be all lowercase with underscores if necessary.
I am adding this font to part of an app theme, but this part is optional.
@Composable
fun AppTheme(
content:
@Composable()
() -> Unit,
) {
MaterialTheme(
content = content,
typography = appTypography,
)
}
appTypography is defined as a variable that creates a custom typography.
val appTypography : Typography
@Composable
get() {
return Typography(
defaultFontFamily = dancingScriptRegular
)
}
dancingScriptRegular is a custom font that we use expect/actual to get a different platform implementation.
val dancingScriptRegular: FontFamily
@Composable
get() {
return FontFamily(
font(
"DancingScript",
"dancingscript_regular",
FontWeight.Normal,
FontStyle.Normal,
),
)
}
The font function is the main bread and butter of our solution here. This is where we use expect/actual to give Android / iOS / Desktop implementations.
Under shared/src/commonMain/kotlin, I created a FontResource.kt class that looks like
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
@Composable
expect fun font(name: String, res: String, weight: FontWeight, style: FontStyle): Font
Under androidMain, iosMain, and desktopMain we will define our actual implemetations.
androidMain:
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
@Composable
actual fun font(name: String, res: String, weight: FontWeight, style: FontStyle): Font {
val context = LocalContext.current
val id = context.resources.getIdentifier(res, "font", context.packageName)
return Font(id, weight, style)
}
iosMain:
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import kotlinx.coroutines.runBlocking
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.resource
private val cache: MutableMap<String, Font> = mutableMapOf()
@OptIn(ExperimentalResourceApi::class)
@Composable
actual fun font(name: String, res: String, weight: FontWeight, style: FontStyle): Font {
// use a cache to store fonts and re-use
return cache.getOrPut(res) {
val byteArray = runBlocking {
resource("font/$res.ttf").readBytes()
}
androidx.compose.ui.text.platform.Font(res, byteArray, weight, style)
}
}
desktopMain:
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
@Composable
actual fun font(name: String, res: String, weight: FontWeight, style: FontStyle): Font =
androidx.compose.ui.text.platform.Font("font/$res.ttf", weight, style)
Lastly, in your shared module build.gradle.kts under the android block, you'll have to add this line so that the Android app will know to use commonMain/resources and a res src directory.
android {
compileSdk = (findProperty("android.compileSdk") as String).toInt()
namespace = "com.myapplication.common"
sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
sourceSets["main"].res.srcDirs("src/androidMain/res")
// This is the line to add
sourceSets["main"].res.srcDirs("src/commonMain/resources") // <=== This is the line to add
// This is the line to add
sourceSets["main"].resources.srcDirs("src/commonMain/resources")
defaultConfig {
minSdk = (findProperty("android.minSdk") as String).toInt()
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_17
targetCompatibility = JavaVersion.VERSION_17
}
kotlin {
jvmToolchain(17)
}
}
And then you should be able to run your project on iOS, Android, and Desktop using a common font.
CocoaPods
A finishing note about CocoaPods. When I was writing this article, I was using the most up-to-date version of the Compose Multiplatform template on Github from JetBrains as a demo. When I was adding this to my project Sync Sphere, I had to do some additional work to get fonts working on iOS. After doing all of the steps listed above, I also had to run ./gradlew :shared:podInstall to get the fonts copied over to iOS, otherwise I was running into a resource not found exception.
Conclusion
I hope these series of code snippets can prove helpful to someone implementing custom typography in their Compose Multiplatform app.
