Setting Google font as Default font for all Kendo Components

[Cole]

I have imported a google font that I want to use as the default font for my application

@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');

I am also using tailwindcss to style a majority of the application so I have tried to set it as
default in many different ways.

@layer base {

  html {

    font-family: Armio, system-ui, sans-serif !important;

  }

}

$kendo-font-family-sans-serif: Armio, system-ui, sans-serif !important;

$font-family-monospace: Armio, system-ui, sans-serif !important;

curious what I am doing wrong - I have been able to manually override in the .appbar component
but for the kendo dialogs it is not taking effect and using the Roboto font instead?

[Martin Bechev]

Hi Cole,

Thank you for the provided details.

In order to set a default font family for the entire application, you can use the body tag and font-family CSS property:

body {
font-family: Armio, serif;
}

The $kendo-font-family SCSS variable will change the font only of the Kendo components.

$kendo-font-family: Arimo, serif;

@import "@progress/kendo-theme-default/dist/all.scss";

Please keep in mind that @font-face is needed to 'register' the new font:

https://stackoverflow.com/a/49879239/10469244

I am attaching a runnable app where I am loading the Arimo-Bold font which is being applied to the Dialog as well (note that the font is loading in Firefox and Safari, but not in Chrome. More details on this topic can be found here).

Regards,
Martin
Progress Telerik