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

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?

There is a github issue related to this.

bug(Theming): When creating a theme using mat.theme( there is no way to configure typography like how we have with mat.define-theme #30444

Where it is recommended to define the styling as:

Comment by wagnermaciel on Feb 24

h1 {
    font: var(--mat-sys-display-large);
}

h2 {
    font: var(--mat-sys-display-medium);
}

h3 {
    font: var(--mat-sys-display-small);
}

h4 {
    font: var(--mat-sys-headline-large);
}

h5 {
    font: var(--mat-sys-headline-medium);
}

h6 {
    font: var(--mat-sys-headline-small);
}

If you would still like to use mat-typography you can checkout my previous answer:

Angular material 19 - mat-typography not applying in custom theme