How to change font-family globally?

[DoctorRyner]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

I change font like this:

<SvelteUIProvider
    {themeObserver}
    withGlobalStyles
    override={{
        fontFamily: '"komet"',

    }}
>
    <slot />
</SvelteUIProvider>

But it only changes for usual html tags and doesn't work on Text, Title, etc components from @svelteuidev/core

In which browser(s) did the problem occur?

No response

Steps To Reproduce

Specify font in SvelteUIProvider

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

[BeeMargarida]

Something like this should work:

<script lang="ts">
    import { createTheme, useSvelteUITheme, SvelteUIProvider } from '@svelteuidev/core';

        const newTheme = createTheme('new-theme', {
            ...useSvelteUITheme(),
            fonts: {
                standard: 'Courier New',
                mono: 'Consolas',
                fallback: 'Segoe UI, system-ui, sans-serif'
            },
        });
</script>

<SvelteUIProvider class={newTheme}>
    <slot />
</SvelteUIProvider>

This allows to use the default theme but changing only the fonts

To avoid TS errors (a bug we have to fix), you can also do:

<script lang="ts">
    import { createTheme, useSvelteUITheme, SvelteUIProvider } from '@svelteuidev/core';

        const newTheme = {
                ...useSvelteUITheme(),
                ...(createTheme('new-theme', {
                    fonts: {
                        standard: 'Courier New',
                        mono: 'Consolas',
                        fallback: 'Segoe UI, system-ui, sans-serif'
                    },
                }) as object)
            };

</script>

<SvelteUIProvider theme={newTheme}>
    <slot />
</SvelteUIProvider>

[DoctorRyner]

Wow, it works. Thank you. I think this should be added to the documentation.