fontscompose-multiplatformcompose-multiplatform-ios

Custom Font Not Displaying in iOS App Using Kotlin Multiplatform


I'm working on a Kotlin Multiplatform project where I'm trying to implement custom fonts for both Android and iOS. The custom fonts work correctly in the Android app but do not appear in the iOS app. Below are the relevant code snippets:

CustomFonts.kt (iosMain)

private fun loadCustomFont(name: String): Typeface {
    return Typeface.makeFromName(name, FontStyle.NORMAL)
}

actual val knightFontFamily
    get() = FontFamily(Typeface(loadCustomFont("knight")))

CustomFonts.kt (commonMain)

expect val knightFontFamily: FontFamily

CustomFonts.kt (androidMain)

actual val knightFontFamily = FontFamily(
    Font(R.font.knight)
)

CustomTheme.kt (commonMain)

val typography = Typography(
    subtitle1 = TextStyle(
        fontFamily = knightFontFamily, // Custom Font
        fontWeight = FontWeight.Normal,
        fontSize = 24.sp
    )
)

@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        typography = typography,
        content = content
    )
}

App.kt Class

fun App(client: SendRequest) {
    AppTheme {
        var newData by remember { mutableStateOf(listOf<DataResponseModel>()) }
        var siteNames2 by remember { mutableStateOf(listOf<String?>()) }
        val scope = rememberCoroutineScope()
        // ...
    }
}

Using the Font I'm using the custom font in my UI like this:

Text(
    style = TextStyle(
        fontFamily = knightFontFamily
    ),
    text = "${serverName?.uppercase()}",
    color = Color.White,
    modifier = Modifier.padding(vertical = 8.dp, horizontal = 4.dp)
        .wrapContentSize(Alignment.Center),
    fontSize = 24.sp
)

Issue The custom font works in the Android app but does not display in the iOS app. When I log the font in CustomFonts.kt from iosMain:

println("Font ->  ${Typeface.makeFromName(name, FontStyle.NORMAL)}")

The debugger output is:

Font -> Typeface(familyName='Helvetica', fontStyle=FontStyle(weight=400, width=5, slant=UPRIGHT), uniqueId=1) This indicates that the iOS app is not loading the custom font correctly.

Issue The custom font works in the Android app but does not display in the iOS app. When I log the font in CustomFonts.kt from iosMain:

println("Font ->  ${Typeface.makeFromName(name, FontStyle.NORMAL)}")

The debugger output is:

Font ->  Typeface(familyName='Helvetica', fontStyle=FontStyle(weight=400, width=5, slant=UPRIGHT), uniqueId=1)

This indicates that the iOS app is not loading the custom font correctly.


Solution

  • I solved the problem this way iosMain CustomTheme.kt class ->

    @OptIn(InternalResourceApi::class)
    private fun loadCustomFont(name: String): Typeface {
        val typeFace =
            runBlocking {
                return@runBlocking Typeface.makeFromData(
                    Data.makeFromBytes(
                        readResourceBytes("font/$name.ttf")
                    ), 0
                )
            }
        return typeFace
    }
    
    actual val knightFontFamily
        get() = FontFamily(Typeface(loadCustomFont("knight")))