How do I enable Angular Material typography utility classes (e.g. .mat-h1) with Angular...

I'm using Angular Material v19 with the new theming API like this:

@include mat.theme((
color: (
primary: mat.$orange-palette,
tertiary: mat.$magenta-palette,
theme-type: color-scheme,
),
typography: (
plain-family: 'Roboto',
brand-family: 'Open Sans',
bold-weight: 900,
medium-weight: 500,
regular-weight: 300,
),
density: 0,
));


Now, when I apply

body {
background: var(--mat-sys-surface);
color: var(--mat-sys-on-surface);
}


I see the colors!

So I think I can conclude that the color system works, but Typography utility classes like .mat-h1 don't show up. Also my fonts aren't applied (still defaults to Times). How do I enable both the utility classes and custom fonts correctly?

Continue reading...