Hi everyone, I'm working with Compose for Web (Was...

# compose-web

[Khangpv202]

Hi everyone,
I'm working with Compose for Web (Wasm) and encountering a font issue. It seems I'm unable to display symbol icons correctly.
For example, when I try to show something like "`Tip\uD83D\uDCA1: If you see an ..`.", the lightbulb symbol (💡) doesn't appear as expected. U can check the 2 images bellow. the left is on phone, the right is on web.
Has anyone else experienced this, or does anyone know how to get the symbols to render properly? Thanks.

[Chrimaeon]

Looks like your font does not include those ligatures. Add a fallback font that includes those. Search in this channel on how to do it.

[Khangpv202]

Thank u 🙂

[Bogdan Vladoiu Lbs]

you could try solving this problem in a more "web way" so to say. it may be a very long detour and complication to what you are trying to achieve but you can also strap in a link to google font service in the header of your page in kotlinjs target ( or .html resource) and leverage it in your composables using the css + attr{} dsl in compose.

// Example of a menu label with emphasized attribute
            Div(attrs = { attr("emphasized", "") }) {
                Span(attrs = { classes(Typography.MENU_LABEL) }) {
                    Text("Emphasized Menu Item")
                }
            }

its a bigger can of worms but it gives you access to dinamic fonts with axis including the GRAD or FILL axis that can be used for really nice emphasis and deemphasis animations. I.e. material-symbols can be leveraged directly as dynamic font characters directly from the font service + css typefaces and you never have to worry about some font/character not being present/installed on the user device. All this is available in the web/kotlinjs target where your problem seems to be!

[Bogdan Vladoiu Lbs]

Either use font service or switch fonts in some Typography object in your web target's kotlin sourceset. I hope I am not wrong but if the character or font is missing from that device, it's simply missing there is nothing you can do but switch font/character.

[Khangpv202]

thanks all. I'm trying to following this. https://github.com/JetBrains/compose-multiplatform-core/pull/1400,

[Chrimaeon]

@Bogdan Vladoiu Lbs which LLM are you using for your answers? 🤖

[Chrimaeon]

Compose web renders to a <canvas> there is no CSS you can use.

[Bogdan Vladoiu Lbs]

none, i'll give you access to my repos where i actually tried the things i am suggesting 😄

[Chrimaeon]

Yes please 😅

[Bogdan Vladoiu Lbs]

i am pretty sure it creates nodes in the dom!

[Bogdan Vladoiu Lbs]

ah compose web not compose html

[Bogdan Vladoiu Lbs]

my bad

[Bogdan Vladoiu Lbs]

but really should people throw away seo and accessibility for canvas? unless i am making a game why would i ever use canvas 😕

[Chrimaeon]

If it’s not a landing page but a real „web“ app, why would you need SEO, think of an email Client, or a Web Shop.

[Chrimaeon]

And JetBrains is activly working on accessibility. Compose Web is still in Alpha

[Bogdan Vladoiu Lbs]

i see

[Bogdan Vladoiu Lbs]

maybe i should consult my llms 😉