How can I use fonts available to the browser on Co...

# compose-web

[Alex Styl]

How can I use fonts available to the browser on Compose Web?

I've tried the following and all of them render as roboto. I also tried preloading, but still the same result

listOf(
    "sans-serif",
    "sans",
    "roboto",
    "system",
    "Arial"
).forEach {
    val fontFamily = FontFamily(SystemFont(it))
    Text("The quick brown fox 🦊😍🤔 ${it}", fontFamily = fontFamily, fontSize = 32.sp)
}

[Alex Styl]

So far I think this is not possible. Just double checking in case I am missing something

[Konstantin Tskhovrebov]

this is not possible

[Jacob Ras]

So this means if you're dealing with user input in any language you'll need to embed all of the fonts, I think 🙁

[Konstantin Tskhovrebov]

yes

[Alex Styl]

thanks for confirming @Konstantin Tskhovrebov

What is a SystemFont in the context of Compose Web? I don't get it

[Konstantin Tskhovrebov]

As I remember this is Skiko embedded font

[Alex Styl]

I'll open a ticket with more info on that. right now using the api is very confusing as the doc says "A Font that's already installed in the system."

I understand the technical limitations, but this is not clear from an API POV

[Konstantin Tskhovrebov]

I understand your point. It works as you say on Desktop

[Alex Styl]

https://youtrack.jetbrains.com/issue/CMP-9246/SystemFont-does-not-load-system-fonts-on-Web

[ephemient]

as an addition to the comment in that issue: the local font API is async and requires an additional runtime permission from the browser, which might involve the browser asking the user which fonts to allow the website to use, for privacy concerns. https://wicg.github.io/local-font-access/#permissions