Changing Font Family for Kendo Angular Components

Environment

Product

Progress® Kendo UI® for Angular

Description

The $kendo-font-family SCSS variable no longer changes the default font family of the Kendo components.

This Knowledge Base article also answers the following questions:

• How can I use the available SCSS and CSS variables of the Kendo theme?
• Where can I find the available SCSS and CSS variables for the components?

Solution

Starting with v10.0.0, the Telerik and Kendo UI themes adopt the new Dart Sass syntax. With this breaking change, the following way of changing the font family is no longer supported:

scss

 $kendo-font-family: ('Poppins', sans-serif)

@import '@progress/kendo-theme-material/dist/all.scss';

To overwrite the default font family using the Dart Sass syntax, you need to utilize the @use rule to load the theme and include the kendo-theme-styles() at the end. More details can be found in Migration to Dart Sass article.

The following code snippet demonstrates how to overwrite the font family using SCSS variable:

scss

// styles.scss
@use "@progress/kendo-theme-bootstrap/scss/index.scss" as * with (
  $kendo-font-family: ('Poppins', sans-serif);
);

@include kendo-theme--styles();

The following code snippet demonstrates how to overwrite the font family using CSS variable:

scss

// styles.scss
:root{
  --kendo-font-family: 'Poppins', sans-serif;
}

Check all exposed typography SCSS variables.

See Also

• Migration to New Dart Sass Syntax