FontFamily.Monospace doesn't seem to work for Web?

[Zomis]

It might be me who is doing something wrong, or it might be something with Compose and/or Wasm, but I can't get the monospace font to work when building for Web.

Add to Kotlin Multiplatform project (I used the https://kmp.jetbrains.com generator)

val state = rememberRichTextState()
LaunchedEffect(Unit) {
    state.addSpanStyle(SpanStyle(fontFamily = FontFamily.Monospace))
    state.setText("Hello World.,!?")
}
RichTextEditor(state, modifier = Modifier.fillMaxSize())

Run ./gradlew :composeApp:wasmJsBrowserDevelopmentRun

Expected result: Monospace font

Actual result: No monospace font

Any help on how to make Monospace font appear in browser appreciated.

On Desktop it works as expected.

[MohamedRejeb]

If you try a normal Text composable or a TextField with this font family, it works fine?

[Zomis]

@MohamedRejeb Nope, it seems like Text("Hello world", fontFamily = FontFamily.Monospace) also does not work as expected. 😞

Any idea where I can report that issue, or how to make it work?

[Zomis]

I added composeApp/src/commonMain/composeResources/font/Monospace.ttf (which I got from https://www.1001fonts.com/monospace-font.html) and did this:

var font: FontFamily? by remember {
    mutableStateOf(null)
}
LaunchedEffect(Unit) {
    font = FontFamily(
        Font(identity = "Monospace", data = Res.readBytes("font/Monospace.ttf"), weight = FontWeight.Normal),
    )
}

And then I could use the monospace font just fine.

Thanks.

[MohamedRejeb]

Ok good,
you can improve this more by changing Res.readBytes with FontFamily(Font(Res.font.Monospace))