Is there a sample project demonstrating loading cu...
# webassembly
b
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
Here's the issue
d
Woah, tofu citay!
b
@SrSouza Any ideas I could try?
c
I’m curious about this too, mine render but there is a small flicker between destinations that shows these artifacts
b
I have that behaviour when navigating on the next NavigationRailItem. @a-dd any work planned on fonts shipping soon?
@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")
@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.
Copy code
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"
c
Did you tried setting up something directly at the index?
o
@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
c
can I add you to my repository?
o
here is my profile: https://github.com/eymar
b
@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
c
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
I was trying this but I did not got it to work yet
b
Well it's used within wasm thus would it help setting something in the index.html?
c
It would look like:
Copy code
@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*/
}
I’m NOT sure, it was a wild try
🚫 1
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?
b
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.
@Cicero @Oleksandr Karpovich [JB] Note: For this first issue - it only appeared after adding the navigation rail
c
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
I can also test your font in my repo
see if I can reproduce there without nav
mine is completely connected to cache and how fast the computer is
b
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.
thank you color 1
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 ?
o
@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
👍🏽 1
@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?
b
Yes, Github proposes to open it on youtrack. Yes the second issue is different. It's caused in combination with the Voyager lib
o
Youtrack is fine too. Please add it there