How can I use a custom font-family

[Teebo]

Hi,

How can I override the default font-family for the library?
I cannot find the documentation for setting up typography.

[waterplea]

You can do it with CSS variables:
https://taiga-ui.dev/variables

[Teebo]

In the styles.scss file, I have tried that with the below

:host {
  --tui-heading-font: 'Outfit', cursive;
  --tui-text-font: 'Outfit', cursive;
}

And also tried with

:root {
  --tui-heading-font: 'Outfit', cursive;
  --tui-text-font: 'Outfit', cursive;
}

But it doesn't seem to work.
I am using a Google font and calling it in the head of the index.html.

Is there something I am doing wrong or missing?

[waterplea]

Make sure styles imports order is right and you write that after the Taiga theme to override the default.

[Teebo]

Yeah that worked after rearranging the style imports to

            "styles": [
              "node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
              "src/styles.scss",
            ],

And using :root instead of :host, I see the variables.less uses the :root too

Thanks a lot bro.

[martypitt]

This is very helpful, thanks!

Could I suggest this would be really helpful to add to the docs?