A modern programming language that makes developers happier.

kotlinlang

Does compose web support variable fonts? I am trying to use Inter, works great on desktop but shows squares on web

Someone already raised it here <https://youtrack.jetbrains.com/issue/CMP-4635/Wasm-Variable-fonts-are-displayed-as>

I was not familiar with the term Variable Fonts;
But it sounds really cool! Would be great if supported :wink:
<https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts>

I see someone has already contributed its support - <https://github.com/JetBrains/compose-multiplatform-core/pull/1623> :slightly_smiling_face:


And if you want to use them via Compose resources - <https://github.com/JetBrains/compose-multiplatform/pull/5183>

<@UDV7KQT43> do i have to use the `variationSettings = FontVariation.Settings(FontVariation.weight(400))` parameter to make it work?

right now i am getting squares without it

I am also getting squares for non variable fonts

&gt;  do i have to use the `variationSettings = FontVariation.Settings(FontVariation.weight(400))`
yes, it looks correct.

Here is a code of the example in our demo project:
<https://github.com/JetBrains/compose-multiplatform-core/blob/367bb867d66f0f1d2ce7de47ebf98a0e268a708b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/components/text/VariableFonts.kt#L38|https://github.com/JetBrains/compose-multiplatform-core/blob/367bb867d66f0f1d2ce7d[…]tlin/androidx/compose/mpp/demo/components/text/VariableFonts.kt>

&gt; I am also getting squares for non variable fonts
How do you set a font? Do you use Compose Resources?

yes. same code works on desktop, doesnt work on wasm

it is not about fonts after all, but i might have found a bug. will report when i get to the bottom of it

<@UDV7KQT43> do you know if you folks rely on recomposition to load the font on web, while other platforms don't need that?

yes, that's true. Since web loads all the resources asynchronously, there is an internal state which is updated when a font is ready.

then the squares is a result of not being able to recompose (which is a bug on my code)

do you show squares if the font is not yet loaded?

usually it's better to wait until the font is ready before showing any content.

<https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-resources-usage.html#preloading-of-resources-for-web-targets>

there is an expandable snippet