Is there a sample project demonstrating loading custom fonts for wasm? The doc points to a <demo pro...

# webassembly

[Benoit Billington]

Is there a sample project demonstrating loading custom fonts for wasm? The doc points to a demo project for ios/android/desktop.
I'm wondering why the "Arturo" font does not render properly on wasm but works very well on android, ios and desktop.
Note: I also have another custom font that renders properly

[Benoit Billington]

Here's the issue

[Benoit Billington]

Mixing otf & ttf

arturo_bold.otfarturo_light.otfarturo_thin.otfarturo_regular.ttf

[dewildte]

Woah, tofu citay!

[Benoit Billington]

@SrSouza Any ideas I could try?

[Cicero]

I’m curious about this too, mine render but there is a small flicker between destinations that shows these artifacts

[Benoit Billington]

I have that behaviour when navigating on the next NavigationRailItem. @a-dd any work planned on fonts shipping soon?

[Benoit Billington]

@Igor Demin When using 1.7.0-alpha01 the text no longer shows tofu but the actual text using the wrong font. (I define the font within the theme) (I'm using 2 font families within my app "arturo" and "malibu")

[Benoit Billington]

@Oleksandr Karpovich [JB] Following up on this issue and also on https://github.com/JetBrains/compose-multiplatform/issues/3051#issuecomment-2220489941
In my layout now see my text using the malibu font instead of arturo (configured by the theme) - I also tried to set a fallback font but that didn't help.

compose-plugin = "1.7.0-dev1723" 
kotlin = "2.0.20-Beta2-48" # Cannot use 2.0.20-Beta2 or anything above Beta2-48 due to "Only IrBlockBody is supported"
ksp = "2.0.20-Beta1-1.0.22"

[Cicero]

Did you tried setting up something directly at the index?

[Oleksandr Karpovich [JB]]

@Benoit Billington Do you have a reproducer project? Could you please report the issue on github?
Perhaps seeing some code/running it can help me see what goes wrong

[Cicero]

https://www.procratus.com/

[Cicero]

can I add you to my repository?

[Oleksandr Karpovich [JB]]

here is my profile: https://github.com/eymar

[Benoit Billington]

@Cicero what do you suggest setting up in the index.html ?
Your issue is not exactly the same - still worrying though.
I'm going to setup a cut down project with the issue

[Cicero]

A friend of mine that deals with web suggested that I inspect my project, find where the fonts are being stored and add the path to them in the index with the fallbacks

[Cicero]

I was trying this but I did not got it to work yet

[Benoit Billington]

Well it's used within wasm thus would it help setting something in the index.html?

[Cicero]

It would look like:

@font-face {
  font-family: 'FiraMono';
  src: url('js/productionExecutable/composeResources/procratus.composeapp.generated.resources/font/FiraMono-Regular.ttf'); / Locate the .ttf file within your directory*/
}

[Cicero]

I’m NOT sure, it was a wild try

[Cicero]

Ok, this is an old thread, I actually changed to JS for now because it WASM wasn’t supporting some browsers.

But the problem is the same.

Would we need a different solution for these problems?

[Benoit Billington]

Here is a repro project which demonstrate the issue @Cicero is facing: https://github.com/Shusshu/wasm-fonts-issue
I still need to figure what to add to experience my problem. to be continued.

[Benoit Billington]

@Cicero @Oleksandr Karpovich [JB] Note: For this first issue - it only appeared after adding the navigation rail

[Cicero]

A friend was helping me with the inspection and he suggested this is related to loading an external font that is not added to the browser

[Cicero]

I can also test your font in my repo

[Cicero]

see if I can reproduce there without nav

[Cicero]

mine is completely connected to cache and how fast the computer is

[Benoit Billington]

Flickering issue raised: https://github.com/JetBrains/compose-multiplatform/issues/5094
I'll probably make another issue with another repro project for the issue I'm facing.

[Benoit Billington]

I don't yet have the wrong font issue but I'm back at my initial problem with tofu font using Voyager navigation lib. I have a repro project https://github.com/Shusshu/wasm-fonts-tofu-issue but I cannot raise another issue on github @Oleksandr Karpovich [JB] should I bundle both issue under the same github issue #5094 ?

[Oleksandr Karpovich [JB]]

@Cicero here is a hacky patch to improve the behaviour of your app.
We'll consider how to improve the API or implementation on our side, because such hacks are not okay. Need a bit more time to think

Untitled

[Oleksandr Karpovich [JB]]

@Benoit Billington

but I cannot raise another issue on github

do you mean GitHub doesn't allow you to create a new issue? Do you believe it should be a different one?

[Benoit Billington]

Yes, Github proposes to open it on youtrack.
Yes the second issue is different. It's caused in combination with the Voyager lib

[Oleksandr Karpovich [JB]]

Youtrack is fine too. Please add it there

[Benoit Billington]

https://youtrack.jetbrains.com/issue/CMP-5094/WASM-Custom-Font-Text-displays-tofu-together-with-the-Voyager-lib