Angular Material v15 Theme + Typography, default text not styled

Asked 28/11, 2022 at 3:39 Answered 7/8, 2023 at 15:51

angular angular-material angular-material-15

When I customize the theme to set a font...

some text gets properly styled (e.g. <mat-card-title> <mat-card-action> etc)
but some other does not (e.g. <p> <span> <mat-card-content>) and default to Roboto... Shouldn't those take the body-1 style? Note that I am using mat-card as an example, but the same happens with other components. https://material.angular.io/guide/typography

Minimal steps to repro:

Add a Google font to index.html
Configure styles in styles.scss so that the new font is the default for all levels (should be used everywhere)

$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-typography: mat.define-typography-config(
  $font-family: "'Nerko One', cursive",
);

$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
    ),
    typography: $my-typography,
  )
);
@include mat.all-component-themes($theme);

Here is an example, you can see that the title etc are styled, but not the content of the card: https://stackblitz.com/edit/angular-wan6f9?file=src/app/card-actions-example.html

I tried a few approaches, including configuring each level which did not work. The only thing that works is to hardcode the default to the root of the document, which I would rather not do.

Skean answered 28/11, 2022 at 3:39 Comment(0)

I had exactly the same symptoms and desperately added @include mat.all-component-typographies($typography); in addition to the @include mat.all-component-themes($my-theme); present in the documentation.

Where $typography is basically the same as described by the OP.

Then all the styles kicked in as expected.

Mauceri answered 29/11, 2022 at 12:41 Comment(4)

This answer put me on the right track, thank you! I also had to add class="mat-typography" to the body of the document to have the styles final show up in div, p etc. Had tried one or the other, but not both at the same time :@ – Skean 30/11, 2022 at 0:42

This is absolute madness @Julien. But it worked __. Thanks a lot – Parochialism 15/12, 2022 at 10:32

After much wasted time I found the samething. Starting with v15 I had to add @include mat.all-component-typographies($mpt-app-theme); for the global material styles to work (<body class="mat-typography">). I figured it was included with all-component-themes but apparently not. – Gilemette 8/1, 2023 at 0:23

Hey I was able to apply font-family, but the config for headline-1 for typography didnt work at all :/ – Pitchy 24/1, 2023 at 15:38

In my case I used the two "legacy" mixins to keep my "not-yet-migrated-to-MDC" code working as before:

mat.define-legacy-typography-config()
mat.all-legacy-component-themes($theme)

But this means you would need to keep using the now legacy components by importing them accordingly. These "legacy" imports should be automatically created with a migration when using ng update @angular/material@15 (see Angular update guide) or when using nx migrate latest in a Nx Workspace.

In material.module.ts of your Stackblitz example:

import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';

Gad answered 8/12, 2022 at 6:39 Comment(2)

mat.all-legacy-component-themes($theme) was what I was missing, thanks! – Jarv 5/1, 2023 at 19:44

This also saved us, thanks a lot! – Poser 15/5, 2023 at 15:23

I had the same issue.

All I did to fix it was wrapping @include mat.all-component-themes($theme); inside body { ... }, so the theme declaration looks like this:

body {
    @include mat.all-component-themes($theme);
}

Looks like this mixin has to be a child of any element to work properly.

Biddable answered 2/12, 2022 at 10:21 Comment(1)

font-family is still not being applied in my case – Joleenjolene 10/1, 2023 at 16:49

In my case, I was using legacy components, and adding this seemed to fix some issues:

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

BUT, it seemed to override some of my custom theme styles, so I had to replace mat.all-legacy-component-themes import with individual imports:

@include mat.legacy-button-theme($theme);
@include mat.legacy-form-field-theme($theme);

Also, be mindful that the order of the @includes matters.

Robbery answered 7/8, 2023 at 15:51 Comment(0)

Recommended topics

Hot tags