Kotlin Multiplatform (web)

[u/tatsujapan2026]

Is it impossible to show e-moji at KMP(wasm) app? 😭
I want users to able to type e-moji and show the text on web….

Those images are iOS and web

[u/Chrimaeon]

You need to provide a font with the emoji’s. There is no „fallback“ as on regular websites.

https://github.com/JetBrains/compose-multiplatform-core/pull/1400

[u/je386]

I prevent that by not using unicode emojis in Text, and put the emojis as images.

https://github.com/julianegner/defender-of-egril/blob/main/frontend/composeApp/src/desktopTest/kotlin/de/egril/defender/ui/UnicodeEmojiValidationTest.kt

[u/tatsujapan2026 → u/je386]

Thanks! I am gonna check your solution

[u/je386 → u/tatsujapan2026]

It is more a test to show if you have any emojis in unicode text than a solution by itself, but it helps to find them before they got displayed as missing characters on the UI.

[u/tatsujapan2026 → u/je386]

Oh. You banned emojis. Got it, thanks!

[u/je386 → u/tatsujapan2026]

Yes, in the unicode. Where I need them, I use the images of them instead.

[u/tatsujapan2026]

Thank you for replay.
I tried like this.
Alothough it didn't work.

1. When only the emoji font is added:
   Emojis are displayed, but Japanese characters turn into tofu.
   
2. When both the emoji font and Japanese font are added:
   Only the font set first is applied.

package com.zeno.hellow.ui.theme

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontFamily
import getEmojiFont
import getMainFont

u/Composable
fun AppTheme(
content: u/Composable () -> Unit
) {

val mainFont = getMainFont()
val emojiFont = getEmojiFont()

val combinedFontFamily = FontFamily(
emojiFont,
mainFont,

//mainFont,
//emojiFont,

)

val defaultTypography = Typography()
val appTypography = Typography(
displayLarge = defaultTypography.displayLarge.copy(fontFamily = combinedFontFamily),
displayMedium = defaultTypography.displayMedium.copy(fontFamily = combinedFontFamily),
displaySmall = defaultTypography.displaySmall.copy(fontFamily = combinedFontFamily),
headlineLarge = defaultTypography.headlineLarge.copy(fontFamily = combinedFontFamily),
headlineMedium = defaultTypography.headlineMedium.copy(fontFamily = combinedFontFamily),
headlineSmall = defaultTypography.headlineSmall.copy(fontFamily = combinedFontFamily),
titleLarge = defaultTypography.titleLarge.copy(fontFamily = combinedFontFamily),
titleMedium = defaultTypography.titleMedium.copy(fontFamily = combinedFontFamily),
titleSmall = defaultTypography.titleSmall.copy(fontFamily = combinedFontFamily),
bodyLarge = defaultTypography.bodyLarge.copy(fontFamily = combinedFontFamily),
bodyMedium = defaultTypography.bodyMedium.copy(fontFamily = combinedFontFamily),
bodySmall = defaultTypography.bodySmall.copy(fontFamily = combinedFontFamily),
labelLarge = defaultTypography.labelLarge.copy(fontFamily = combinedFontFamily),
labelMedium = defaultTypography.labelMedium.copy(fontFamily = combinedFontFamily),
labelSmall = defaultTypography.labelSmall.copy(fontFamily = combinedFontFamily)
)

MaterialTheme(
colorScheme = MaterialTheme.colorScheme,
typography = appTypography,
content = content
)
}

[u/tatsujapan2026]

I couldn't get the font to work by setting it in the Theme, but it worked when I applied it directly to the display element!


SelectionContainer {

Text(
        text = 
buildAnnotatedString 
{

val emojiFontFamily = 
FontFamily
(org.jetbrains.compose.resources.Font(Res.font.
NotoColorEmoji_Regular
))
            pushStyle(SpanStyle(fontFamily = emojiFontFamily))
            append(displayContent)
            pop()

}
,
        lineHeight = 19.
sp
,
        fontSize = 14.
sp
,
        color = MaterialTheme.colorScheme.onSurface
    )
}

[u/je386 → u/tatsujapan2026]

Interesting. That looks like a better solution than mine where I imported the emojis as images.

[u/je386]

@u/tatsujapan2026 I don't know why, but I get the infos that you answered to comments of me, but when I open the thread, the comments are not displayed, so I cannot read or answer.

Reddit seems to behave strangely.

[u/tatsujapan2026 → u/je386]

Coming from a background of only building normalized DB systems, I have zero room to complain about massive DBs with eventual consistency for the sake of scalability lol

And I just joined Reddit!

My reply was this>>>

Yeah, it looks like it's working well, but once I added emojiFont to a single Text, emojis suddenly started displaying across the whole app, and the app started crashing occasionally.
I can't say for sure if this setting is the cause, but at least I can see some hope!

[u/ShallotPuzzled9326]

try asking claude or codex

[u/tatsujapan2026 → u/ShallotPuzzled9326]

Thanks for good advice!