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

[zPhoeniqz]

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

[illright]

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]

I thought I could just make an @import statement to my font in the theme.scss file and then @forward 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:

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

	* {
		font-family: 'Varela Round', sans-serif !important;
	}
</style>

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

[illright]

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]

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