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

I set up a new angular project with angular 19 and ran into the issue mentioned in the title. Added material with the ng add cli command, and selected "yes" to the prompt if I wanted to use typography. This worked so far, my body element now has the mat-typography class.

Next, I set up a custom theme according to the docs, my theme declaration looks like this:

@use "@angular/material" as mat;

html {
    @include mat.theme(
        (
            color: (
                theme-type: light,
                primary: mat.$spring-green-palette,
            ),
            typography: Roboto,
            density: 0,
        )
    );
}

Also added the Roboto font to my element, following the material docs. After this, the material components had the correct font and typography applied, but "plain" html tags like <h1>, <p> and so on don't. Searched the pre-defined themes for the rules that should be applied, and if I copy them to my main stylesheet, they work fine, but it seems like the custom theme doesn't include them even if the typograpy section is set in the theme config.

Screenshots showing the difference between the 2 cases:

Has anyone ran into this issue, and if so, found any solution?

I have raised an issue on github with my analysis, please follow it to understand the root cause:

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

More reliable solution:

Until this gets fixed try mat.define-theme and mat.typography-hierarchy to configure the typography for all elements.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$spring-green-palette,
    ),
    typography: (
      plain-family: Roboto,
      brand-family: Open Sans,
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
    density: (
      scale: 0,
    ),
  )
);
body {
  @include mat.core();
  @include mat.all-component-themes($theme);
}

@include mat.typography-hierarchy($theme);

html {
  height: 100%;
}

Stackblitz Demo

Hacky Solution:

Seems like this method (mat.theme() does not have a setting up typography (because no theme is returned to store in a variable), you can try this shortcut, which is present in an angular/material example:

@use '@angular/material' as mat;

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;

  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$spring-green-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

html {
  height: 100%;
}

Stackblitz Demo