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:
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?
You likely have an import of indigo-pink.scss
somewhere. Either in :
angular.json
config