Angular custom theme doesn't change typography

Question

I'm writing a frontend using Angular 15.2.0 and Angular Material 15.2.6.

I want to define a theme that uses these color palettes:

• primary: indigo
• secondary: green
• warn: red

And also use Noto Sans instead of Roboto as font-family.

I wrote this theme.scss file and imported it in my styles.scss file:

@use '@angular/material' as mat;

@include mat.core();

// Define custom theme colors
$my-palette-primary: mat.define-palette(mat.$indigo-palette);
$my-palette-accent: mat.define-palette(mat.$green-palette);
$my-palette-warn: mat.define-palette(mat.$red-palette);

// Override default typography
$my-typography: mat.define-typography-config(
  $font-family: 'Noto Sans, sans-serif',
);

// Create custom theme using the defined colors
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-palette-primary,
    accent: $my-palette-accent,
    warn: $my-palette-warn,
  ),
  typography: $my-typography,
));

// Include custom theme in app
@include mat.all-component-themes($my-theme);

I also changed the font link in index.html accordingly:

<link 
    href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap"
    rel="stylesheet">

However, as per browser inspector, class .mat-typography still comes from indigo-pink.scss and sets the CSS rule font-family: Roboto, sans-serif. As that font is no longer loaded, it reverts to Arial.

What mistake did I make here?

Answer 1

You likely have an import of indigo-pink.scss somewhere. Either in :

• one of your scss files
• your angular.json config