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

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: https://github.com/angular/components/issues/23683#issue-1015421891

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:

Add custom theme with typography
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

Feb 07 '22 13:02 steffenhees

But it only changed the font-family in mat components, not outside in normal divs.

By "normal divs", do you mean elements with mat- typography classes or just divs that aren't part of Material components? In general we try not to style any elements outside of our components. If you want the same typography to apply to the entire page, you can try to add the mat-typography class to the body or some other parent element.

Feb 08 '22 14:02 crisbeto

add the mat-typography class to the body or some other parent element. Yes, this is what I have.

Example: <body class="mat-typography"> <mat-toolbar color="primary"><span>Headline></span></mat-toolbar> <div>Some text </div> </body>

The headline had the changed font-family. The "Some text" did not have the changed font family, it had still the default Robot font-family.

Feb 09 '22 15:02 steffenhees

So I think the problem is that you need to pass in your custom typography to the mat.core mixin. Here's a config that worked for me both for the headline and the "Some text" under it.

$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent
  ),
  typography: mat.define-typography-config(
    $font-family: 'Arial',
  ),
));

@include mat.core($candy-app-theme);
@include mat.all-component-themes($candy-app-theme);

Alternatively you can include the all-component-typographies like you mentioned above since that's what mat.core does internally anyway.

Feb 11 '22 10:02 crisbeto

Yes, that are all nice workarounds. I already mentioned that it works with all-component-typographies. But the bug is, that it is not working with all-component-themes. And this has to be fixed. Please.

I just tried out the kids-theme example on the website , and this is not working either.

Feb 11 '22 12:02 steffenhees

Technically this works as expected. The all-component-themes includes the theme on for Angular Material components, the mat-typography classes are considered extra add-ons.

Feb 11 '22 12:02 crisbeto

So I think the problem is that you need to pass in your custom typography to the mat.core mixin. Here's a config that worked for me both for the headline and the "Some text" under it.
$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent
  ),
  typography: mat.define-typography-config(
    $font-family: 'Arial',
  ),
));

@include mat.core($candy-app-theme);
@include mat.all-component-themes($candy-app-theme);
Alternatively you can include the all-component-typographies like you mentioned above since that's what mat.core does internally anyway.

mat-core does not appear to allow any parameters on v15:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Only 0 arguments allowed, but 1 was passed. ┌──> src/styles.scss 33│ @include mat.core($my-theme);

Nov 21 '22 17:11 umutesen

Seems related : https://stackoverflow.com/questions/74595732/angular-material-v15-theme-typography-default-text-not-styled

Nov 29 '22 02:11 Judp0m

I've been spending way too much time on this, and have decided that I hope it is a side-effect of the error in compiling the sass files (https://github.com/angular/components/issues/26037).

True, this does seem like a bit of a long shot, but my theory is that the Sass compiler is bailing out when it hits the error, which is why some components receive custom typography styles while others receive the default typography.

If this theory holds true, I saw in another comment that there is going to be a new release of Angular Material in the next 24 hours or so that will hopefully resolve this issue.

Nov 29 '22 06:11 travissimon

@include mat.core($typography); how about the mat.legacy-core ? It doesn't seem to take any argument and I've got parts of the app where the font isn't properly taken into account anymore

Dec 15 '22 10:12 maxime1992

Having the exact same problem and can't figure out a clean way to fix it.

Apr 24 '23 20:04 maziluradu

any fix?

Apr 26 '23 14:04 Kiriakos41

I think maybe there are multiple things being asked for in this issue:

Setting the core angular material typography styles (for things like mat-option) should be down with mat.core-theme($theme) or mat.core-typography($typography-config)
Setting the typography for things like h1, h2, etc. should be down with mat.typography-hierarchy($theme)

I'm going to mark this as a docs issue, because I think the section on typography is out of date and needs an update to explain these different mixins and what they're responsible for.

Sep 25 '23 21:09 mmalerba

OMG! The 'Official' documentation on Customizing Typography doesn't work and some of the official comments here have us going in multiple directions!

Below is my styles.css file. The only thing I have in my simple project. I had tried it different ways, where they typography is defined within the theme and that didn't work as well.

Not one to fully give up. I saw another post and what finally worked was using @include mat.all-component-typographies($tst-typo);


// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$typotest-primary: mat.define-palette(mat.$indigo-palette);
$typotest-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$typotest-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$typotest-theme: mat.define-light-theme((
  color: (
    primary: $typotest-primary,
    accent: $typotest-accent,
    warn: $typotest-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($typotest-theme);


$tst-level: mat.define-typography-level(
  $font-family: unquote("Ubuntu"),
  $font-weight: 400,
  $font-size: 10px,
  $line-height: 1,
  $letter-spacing: normal,
);

$tst-typo: mat.define-typography-config(
  $button: $tst-level
);

//## This Didn't work!!
// @include mat.typography-hierarchy($tst-typo);

//## This didn't work as well!!
// @include mat.core-typography($tst-typo);

// !!!!  This worked !!!
@include mat.all-component-typographies($tst-typo);


/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
// body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Dec 08 '23 18:12 incy-tron

Is it possible that we can change custom font family on [dir] change ?? for example: ltr > Poppins rtl > Tajawal

Feb 14 '24 15:02 MahmoudTarek44

components components copied to clipboard

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

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

components
components copied to clipboard