How do I get custom fonts working in wasm? (wasmJs...

# compose-web

[martmists]

How do I get custom fonts working in wasm? (wasmJs in a ktor app above, jvm on desktop below)

[Artem Kobzar]

@Oleksandr Karpovich [JB] ^^

[Oleksandr Karpovich [JB]]

Do you use compose resources? Or do you use the fonts manually?

you might have a look here: https://github.com/JetBrains/compose-multiplatform/issues/4968

The better documentation is in progress.

[martmists]

I'm using Compose Resources and have a function provide the entire FontFamily through a compositionlocal

[Oleksandr Karpovich [JB]]

Could you please have a look at Network tab in the dev tools?

It's expected that the font file should be loaded and we would see it there.

[martmists]

Oh, is it not embedded in the WASM?

[Oleksandr Karpovich [JB]]

There is only 1 font (Roboto regular) embedded into the bundle.
If you need a custom font, then it should be loaded (on web).

If you use Compose Resources for fonts, I'd expect it to be loaded for you automatically on the first usage.

[martmists]

The problem is likely that I use a Gradle task to copy the generated js/wasm to resources/static/js, I already had to make a redirect route for WASM, and I wasn't aware resources also had to be served separately. Is there a way to specify where these files are loaded from or will I again have to set up redirects for all of these resources to /static/fonts/<file>

[Oleksandr Karpovich [JB]]

Perhaps, this is what you need https://github.com/JetBrains/compose-multiplatform/blob/master/components/resources/demo/shared/src/wasmJsMain/kotlin/main.wasm.kt#L26 if I understood correctly

[martmists]

Does that also allow me to configure where the js file tries to locate the wasm file?

[Oleksandr Karpovich [JB]]

no, that API is only for compose resources (the files in composeResources folder): fonts, drawables, strings, etc.

[martmists]

Is there a different setting I can use in the gradle plugin or something in that case?

[Oleksandr Karpovich [JB]]

I'm not sure.
Why do you need to change where the js file tries to locate the wasm file?

[martmists]

Because I have the wasm file located as /static/js/file.wasm next to the js file, but the js file tries to locate it as /file.wasm which conflicts with my current setup of serving files/pages, so I have to add exceptions for those wasm files specifically.

[Oleksandr Karpovich [JB]]

I think, you can add a custom gradle task which would modify the content of js file. It would change the path of .wasm file.
The gradle task would run after wasmJsBrowserDistribution task