Hi Devs I want to implement custom font in the KMM...

# multiplatform

[Mahvi]

Hi Devs
I want to implement custom font in the KMM project(UI in the jetpack compose), I placed my font files in the commonMain->composeResouces->font

And when I'm trying to access the font via Res.font.<name> I got error in the logcat: java.lang.IllegalStateException: Could not load font

I'm attaching the screen shots for the reference. Any help will be highly appreciated.
Slack Conversation

[Kambi Victor]

I had the same issue. For me I had to restart my system or intellij. After restarting the don't was able to be recognized during build time. I don't know why but I had to resort to this.

[Andrii Yanechko]

Well, can confirm solution above helped me 🤷‍♂️

[Kapil Yadav]

Any luck @Mahvi @Andrii Yanechko @Kambi Victor

[Mahvi]

No @Kapil Yadav. 😞

[Kapil Yadav]

which font u using ?

[Kapil Yadav]

Im facing same problem. Clean rebuilt everything

[Kambi Victor]

@Kapil Yadav we're you able to solve the problem

[Kapil Yadav]

No mate

[Kambi Victor]

which kotlin version are you using

[Kapil Yadav]

1.9.22 kotlin version
compose 1.6.1

[Kapil Yadav]

@Kambi Victor

[Kambi Victor]

@Kapil Yadav have you tried to delete the Res file and generate it again.

[Kapil Yadav]

Yes

[Kambi Victor]

Any breakthrough

[Kapil Yadav]

Many times

[Kapil Yadav]

Nope :)

[Kapil Yadav]

Compose version is 1.6.1

[Kambi Victor]

Screenshot of the full error

[Kambi Victor]

Also what about java version

[Kapil Yadav]

And when l'm trying to access the font via Res.font.<name> got error in the logcat: java.lang.IlegalStateException: Could not load font

[Kambi Victor]

java --version

[Kambi Victor]

@Kapil Yadav Have a look if this solves your problem
https://github.com/JetBrains/compose-multiplatform/issues/4387

[Kapil Yadav]

Thanks man, I'll check

[Mahvi]

I'm able to access the fonts now. I have created a commonText component which implements my fonts from the common resource Folder.
Have a look at https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-images-resources.html#fonts

[Kambi Victor]

So this component seems to be the one every composable that will need to access fonts be calling?

[Mahvi]

Now I'm not using Text() composable directly bu using my custom CommonText composable.

Here is a code snippet:

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cashtoks.composeapp.generated.resources.Montserrat_Bold
import cashtoks.composeapp.generated.resources.Montserrat_Medium
import cashtoks.composeapp.generated.resources.Montserrat_Regular
import cashtoks.composeapp.generated.resources.Montserrat_SemiBold
import cashtoks.composeapp.generated.resources.Res
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.Font
import utils.ColorPalette


@OptIn(ExperimentalResourceApi::class)
@Composable
fun CommonText(
    text: String,
    isGradient: Boolean = false,
    color: Color = ColorPalette.Primary.Default,
    fontSize: TextUnit = 14.sp,
    fontWeight: FontWeight = FontWeight.Normal,
    textAlign: TextAlign = TextAlign.Unspecified,
    modifier: Modifier = Modifier.padding(0.dp),
    lineHeight: TextUnit = 23.sp
) {
    val gColor1 = Color(0xFFD70000)
    val gColor2 = Color(0xFF2B1BF7)

    val fontFamily = when (fontWeight) {
        FontWeight.Bold -> Font(Res.font.Montserrat_Bold)
        FontWeight.SemiBold -> Font(Res.font.Montserrat_SemiBold)
        FontWeight.Medium -> Font(Res.font.Montserrat_Medium)
        else -> Font(Res.font.Montserrat_Regular)
    }

    val textStyle = if (isGradient) TextStyle(
        brush = Brush.linearGradient(
            colors = listOf(
                gColor1,
                gColor2,
            )
        ),
        fontWeight = fontWeight,
        fontSize = fontSize,
        lineHeight = lineHeight,
        fontFamily = FontFamily(fontFamily)
    )
    else TextStyle(
        fontWeight = fontWeight,
        fontSize = fontSize,
        lineHeight = lineHeight,
        fontFamily = FontFamily(fontFamily)
    )

    if (isGradient) {
        return Text(
            text, style = textStyle
        )
    }

    Text(
        text,
        color = color,
        textAlign = textAlign,
        modifier = modifier,
        style = textStyle,
    )
}

[Kambi Victor]

Can you share a snippet of how you used Text()

[Mahvi]

CommonText(
    text = "Don't have an account?",
    color = ColorPalette.Gray.Default,
    lineHeight = 23.sp
)

[Kambi Victor]

what about the default Text() composable from material3

[Mahvi]

It is implemented in CommonText internally. See code above.

[Kambi Victor]

I can see that commonText is your own custom defined composable.
Before using commonText, i believe you were using the Text() provided by material3,
How did you define the font you were using within it?

[Mahvi]

val fontFamily = when (fontWeight) {
FontWeight.Bold -> Font(Res.font.Montserrat_Bold)
FontWeight.SemiBold -> Font(Res.font.Montserrat_SemiBold)
FontWeight.Medium -> Font(Res.font.Montserrat_Medium)
else -> Font(Res.font.Montserrat_Regular)
}

I just added the font files in the composeResources>fonts
and build my project. After that I can access it with Res.font.<name>

[Kambi Victor]

@Mahvi have you considered making use of Typography() and defining it to make use of your custom Font

[Mahvi]

Nope. I'm a very beginner here. So may be I did it in the wrong way 😞

[Kambi Victor]

@Mahvi Give this a look
https://github.com/joelkanyi/FocusBloom/blob/develop/shared/src/commonMain/kotlin/com/joelkanyi/focusbloom/core/presentation/theme/Type.kt

[Kapil Yadav]

Process: com.roposo.android.debug, PID: 24934
java.lang.IllegalStateException: Could not load font
at androidx.compose.ui.text.font.TypefaceRequestCache.runCached(FontFamilyResolver.kt:207)
at androidx.compose.ui.text.font.FontFamilyResolverImpl.resolve(FontFamilyResolver.kt:92)
at androidx.compose.ui.text.font.FontFamilyResolverImpl.resolve-DPcqOEQ(FontFamilyResolver.kt:79)
at androidx.compose.ui.text.platform.AndroidParagraphIntrinsics$resolveTypeface$1.invoke-DPcqOEQ(AndroidParagraphIntrinsics.android.kt:92)
at androidx.compose.ui.text.platform.AndroidParagraphIntrinsics$resolveTypeface$1.invoke(AndroidParagraphIntrinsics.android.kt:90)
at androidx.compose.ui.text.platform.extensions.TextPaintExtensions_androidKt.applySpanStyle(TextPaintExtensions.android.kt:63)
at androidx.compose.ui.text.platform.AndroidParagraphIntrinsics.<init>(AndroidParagraphIntrinsics.android.kt:109)
at androidx.compose.ui.text.platform.AndroidParagraphIntrinsics_androidKt.ActualParagraphIntrinsics(AndroidParagraphIntrinsics.android.kt:184)
at androidx.compose.ui.text.ParagraphIntrinsicsKt.ParagraphIntrinsics(ParagraphIntrinsics.kt:98)
at androidx.compose.ui.text.ParagraphIntrinsicsKt.ParagraphIntrinsics$default(ParagraphIntrinsics.kt:91)
at androidx.compose.foundation.text.modifiers.ParagraphLayoutCache.setLayoutDirection(ParagraphLayoutCache.kt:250)
at androidx.compose.foundation.text.modifiers.ParagraphLayoutCache.layoutText-K40F9xA(ParagraphLayoutCache.kt:273)
at androidx.compose.foundation.text.modifiers.ParagraphLayoutCache.layoutWithConstraints-K40F9xA(ParagraphLayoutCache.kt:183)
at androidx.compose.foundation.text.modifiers.TextStringSimpleNode.measure-3p2s80s(TextStringSimpleNode.kt:326)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.measure-BRTryo0(LayoutModifierNodeCoordinator.kt:116)
at androidx.compose.ui.graphics.SimpleGraphicsLayerModifier.measure-3p2s80s(GraphicsLayerModifier.kt:646)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.measure-BRTryo0(LayoutModifierNodeCoordinator.kt:116)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasureBlock$1.invoke(LayoutNodeLayoutDelegate.kt:252)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasureBlock$1.invoke(LayoutNodeLayoutDelegate.kt:251)
at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2303)
at androidx.compose.runtime.snapshots.SnapshotStateObserver$ObservedScopeMap.observe(SnapshotStateObserver.kt:500)
at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:256)
at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:133)
at androidx.compose.ui.node.OwnerSnapshotObserver.observeMeasureSnapshotReads$ui_release(OwnerSnapshotObserver.kt:113)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate.performMeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:1617)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate.access$performMeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:36)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$MeasurePassDelegate.remeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:620)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$MeasurePassDelegate.measure-BRTryo0(LayoutNodeLayoutDelegate.kt:596)
at androidx.compose.foundation.layout.BoxMeasurePolicy.measure-3p2s80s(Box.kt:144)
at androidx.compose.ui.node.InnerNodeCoordinator.measure-BRTryo0(InnerNodeCoordinator.kt:126)
at androidx.compose.foundation.layout.FillNode.measure-3p2s80s(Size.kt:699)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.measure-BRTryo0(LayoutModifierNodeCoordinator.kt:116)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasureBlock$1.invoke(LayoutNodeLayoutDelegate.kt:252)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasureBlock$1.invoke(LayoutNodeLayoutDelegate.kt:251)
at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2303)

[Kapil Yadav]

@Kambi Victor this is whole error.
Drawble is working fine by Res but for any font getting this crash