search

illright / attractions

A pretty cool UI kit for Svelte
https://illright.github.io/attractions
MIT License
1.04k stars 34 forks source link

How to use custom fonts for e.g. FormFields? #341

Closed zPhoeniqz closed 2 years ago

zPhoeniqz commented 2 years ago

How do I do that?
Fonts I imported from Google fonts don't work with the attractions components if I forward the _variables file with e.g.
$font: "'Varela Round', sans-serif"
It seems as if only default fonts work.

illright commented 2 years ago

I need to see how you link fonts to the application to investigate the issue. Could you please provide a short reproduction of the issue, perhaps in StackBlitz or a repository?

zPhoeniqz commented 2 years ago

I thought I could just make an code>@import</code statement to my font in the theme.scss file and then code>@forward</code the _variables with $font set to my imported font. But three days later and maybe a tiny bit smarter I think that the reason you can't do that is something related to SCSS. I think SCSS doesn't forward the imported stuff to another file even if it's needed there. It would still be nice to have an optiion of setting a custom font though, but it's understandable that there isn't one (yet).


theme.scss:


@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

@forward '~attractions/_variables' with (
    $main: #1e3799,
    $font: "'Varela Round', sans-serif"
);


The only kind of solution I found is doing following in the app.html:

But the problem with this one is that it doesn't set the font explicitly for the attractions components like $font would.

illright commented 2 years ago

The trick here is to link the font in the HTML using a <link> tag (example) and then use its name in the $font variable (example).

aabounegm commented 2 years ago

Since there haven't been any replies on this issue for 2 weeks, I'll assume the issue is resolved