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

[kai1992cool]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When applying a theme like below:

@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%;
}

Without the commented code in body tag, the h1 to h6 tags do not have the default font-family.

Stackblitz mat.theme

---

In the old method we had the typography-hierarchy, set this up and it works great:

@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

So the question is how to define the typography for h1-h6 with mat.theme(

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

way to configure typography with define-theme

Actual Behavior

no way to configure typography with define-theme

Environment

• Angular: 19
• CDK/Material:19
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[mattiLeBlanc]

Any news on this? I just migrated to A19 and I am having the same issue, I added mat-typography to Body class, but only mat components use the font I have set.
Any H1 or P tag does not get the font.
In Angular 18 I was using M2 with define-typography-config and that worked great:

$typography1: mat.m2-define-typography-config(
  $font-family: 'Poppins',
  $headline-5: mat.m2-define-typography-level(32px, 38px, 600), /* H1 */
  $headline-6: mat.m2-define-typography-level(24px, 32px, 600), /* H2 */
  $subtitle-1: mat.m2-define-typography-level(20px, 32px, 600), /* H3 */
  $subtitle-2: mat.m2-define-typography-level(18px, 32px, 400), /* H4 */
  $body-1: mat.m2-define-typography-level(16px, 24px, 400),
  $body-2: mat.m2-define-typography-level(16px, 24px, 600),
  $caption: mat.m2-define-typography-level(13px, 13px, 500), /* error texts and hints */
  $button: mat.m2-define-typography-level(16px, 24px, 600)
);

In the new theme setup you only do this:

  @include mat.theme(
    (
      color: (
        primary: colors.$primary-palette,
        tertiary: colors.$tertiary-palette,
        theme-type: light,
      ),
      typography: (
        plain-family: Poppins,
        brand-family: Poppins,
        bold-weight: 900,
        medium-weight: 500,
        regular-weight: 300,
      ),
      density: 0,
    )
  );

which doesnt make it clear why the other elements are not using the set font.
Maybe I have to revert back to CSS and set the font in my body tag??

The docs mention 5 levels of typography classes (https://material.angular.io/guide/system-variables#typography) but do they suggest we just define our own CSS again for H1 to H6 using the variables?
Like this:

/*
  https://material.angular.io/guide/system-variables#typography
*/

h1 {
 font: var(--mat-sys-headline-large)
}
h2 {
 font: var(--mat-sys-headline-medium)
}
h3 {
 font: var(--mat-sys-headline-small)
}

body {
  font: var(--mat-sys-body-large)
}

[wagnermaciel]

Hi folks, mat.typography-heirarchy is still there for now, but I'd recommend doing what @mattiLeBlanc demonstrated

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);
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}