How to implement custom fonts

[ArleyPereira]

I'm looking for a way to configure custom fonts in my multiplatform compose project.

The iosMain-side 'import org.jetbrains.compose.resources.resource' is not recognized.

Kotlin: 1.9.23
Compose: 1.6.1

commonMain

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

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 androidx.compose.ui.text.platform.Font
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 {
    return cache.getOrPut(res) {
        val byteArray = runBlocking {
            resource("font/$res.ttf").readBytes()
        }
        Font(res, byteArray, weight, style)
    }
}

build.gradle.kts

android {
    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
    sourceSets["main"].res.srcDirs("src/androidMain/res")
    sourceSets["main"].resources.srcDirs("src/commonMain/resources")

    sourceSets["main"].res.srcDirs("src/commonMain/resources", "src/androidMain/res")
    sourceSets["main"].resources.srcDirs("src/commonMain/composeResources")
}

[ArleyPereira]

Implementation was simpler than I was expecting.

1 - I configured my custom font family

import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import compropay.composeapp.generated.resources.Res
import compropay.composeapp.generated.resources.avenir_black
import compropay.composeapp.generated.resources.avenir_bold
import compropay.composeapp.generated.resources.avenir_heavy
import compropay.composeapp.generated.resources.avenir_light
import compropay.composeapp.generated.resources.avenir_medium
import compropay.composeapp.generated.resources.avenir_regular
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.Font

@OptIn(ExperimentalResourceApi::class)
@Composable
fun AvenirTypography(): FontFamily {
    return FontFamily(
        Font(resource = Res.font.avenir_black, weight = FontWeight.Black, style = FontStyle.Normal),
        Font(resource = Res.font.avenir_bold, weight = FontWeight.Bold, style = FontStyle.Normal),
        Font(resource = Res.font.avenir_heavy, weight = FontWeight.SemiBold, style = FontStyle.Normal),
        Font(resource = Res.font.avenir_light, weight = FontWeight.Light, style = FontStyle.Normal),
        Font(resource = Res.font.avenir_medium, weight = FontWeight.Medium, style = FontStyle.Normal),
        Font(resource = Res.font.avenir_regular, weight = FontWeight.Normal, style = FontStyle.Normal)
    )
}

2 - Using in my components

Text(
    text = title,
    fontFamily = AvenirTypography(),
    fontWeight = FontWeight.SemiBold
)