Skip to content

bug(theming): mat.define-typography-config($font-family: 'Times') doesn't work on v15-next #25780

Closed
@srcn

Description

@srcn

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

14.x

Description

Setting the $font-family on typography configuration doesn't set the font-family.

@use '@angular/material' as mat;

@include mat.core();

// Setting the font for default typography does NOT work
@include mat.all-component-typographies(
  mat.define-typography-config($font-family: 'Times')
);

// Define the default theme
$default-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
    typography:
      // Setting the font for the theme also does NOT work
      mat.define-typography-config(
        $font-family: 'Times',
      ),
    density: 0,
  )
);

@include mat.all-component-themes($default-theme);

In all cases, the default Roboto, sans-serif is used. The only way of making this work is to set the individual levels on typograhy-config which is not ideal and would break a lot of apps.

Reproduction

Reproduction examples:

Stackblitz reproduction with v15.0.0-next.4

Stackblitz working example with v14.2.4

Expected Behavior

We should be able to set the font-family of all components as well as the .mat-typography class using the mat.define-typography-config($font-family: 'Times') configuration.

Actual Behavior

The font-family currently cannot be changed using the mat.define-typography-config($font-family: 'Times') config.

Environment

  • Angular: v15.0.0-next.5
  • CDK/Material: v15.0.0-next.4
  • Browser(s): Chrome 106
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: material/core

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions