Skip to content

bug(Theming Angular Material): Custom typography not applied to standard typography levels in mat.core-theme() or all-component-themes() #24370

Open
@steffenhees

Description

@steffenhees

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

Tried to change the font-family so that e.g. body-1 everywhere has font family Arial.
But it only changed the font-family in mat components, not outside in normal divs.

$my-typography: mat.define-typography-config(
  $font-family: 'Arial',
);
$my-theme: mat.define-light-theme((
  typography: $my-typography,
  color: (
    primary: $dicey-primary,
    accent: $dicey-accent,
    warn: $dicey-warn,
  ))
);
@include mat.all-component-themes($my-theme);

Similar problem was reported here, but not solved: #23683 (comment)


It works when I do it with all-component-typographies:

$my-typography: mat.define-typography-config(
  $font-family: 'Arial',
);
@include mat.all-component-typographies($my-typography);

Reproduction

Steps to reproduce:

  1. Add custom theme with typography
  2. See if body tag font-family changes

Expected Behavior

Bodys font family changes to custom font family

Actual Behavior

The body font family is standard Roboto

Environment

  • Angular: 13.1.2
  • CDK/Material: 13.1.1
  • Browser(s): Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/corearea: themingdocsThis issue is related to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions