Overriding Angular Material body typography

Question

I've created a custom theme using Angular Material (v 5.2.4) in an Angular (v 5.2.0) app.

my-theme.scss:

@import '~@angular/material/theming';

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed"'
);

.my-theme {
  @include angular-material-theme($my-theme);
  @include angular-material-typography($my-typography);
}

I've also added the class names mat-app-background mat-typography to the body in the index.html page for my app.

When I add the my-theme class to the container of my app (inside the body), then all of the material components do get the custom font (for things like radio button labels, etc), but nothing outside of a component gets it.

I've also tried using the angular-material-typography() and mat-base-typography() mixins to no avail.

How can I override the fonts from the mat-typography class?

Solution 1

The accepted question pointed me in the right direction, this is how I ended up getting it working, for future reference:

@import '~@angular/material/theming';

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed"'
);

.my-theme {
  @include angular-material-theme($my-theme);

  // this is what fixed it
  .mat-typography & {
    font-size: mat-font-size($my-typography, body-1);
    font-family: mat-font-family($my-typography, body-1);
    line-height: mat-line-height($my-typography, body-1);

    h1, h2, h3 {
      font-family: mat-font-family($my-typography, body-1);
    }
  }
}

Solution 2

    @import '~@angular/material/theming';
    @import './color_palette.scss'; // contains custom palette
    @import './app_theme.scss'; // contains app mixin

   $app-typography: mat-typography-config(
      $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
      $display-4:     mat-typography-level(112px, 112px, 300),
      $display-3:     mat-typography-level(56px, 56px, 400),
      $display-2:     mat-typography-level(45px, 48px, 400),
      $display-1:     mat-typography-level(34px, 40px, 400),
      $headline:      mat-typography-level(24px, 32px, 400),
      $title:         mat-typography-level(20px, 32px, 500),
      $subheading-2:  mat-typography-level(16px, 28px, 400),
      $subheading-1:  mat-typography-level(15px, 24px, 400),
      $body-2:        mat-typography-level(14px, 24px, 500),
      $body-1:        mat-typography-level(14px, 20px, 400),
      $caption:       mat-typography-level(12px, 20px, 400),
      $button:        mat-typography-level(14px, 14px, 500),
        // Line-height must be unit-less fraction of the font-size.
      $input:         mat-typography-level(16px, 1.25, 400)
    );

    @include mat-core($app-typography);

    $primary: mat-palette($deeppurple); // $deeppurple form color_palette
    $accent:  mat-palette($blue);  // $blue form color_palette
    $warn:    mat-palette($red);  // $red form color_palette
    $theme:   mat-light-theme($primary, $accent, $warn);
    @include  app-theme($theme);  //app mixin from app_theme

    body, html {
      margin: 0;
      height: 100%;
      font-size: mat-font-size($app-typography, body-1);
      font-family: mat-font-family($app-typography);
      line-height: mat-line-height($app-typography, body-1);
    }

Solution 3

This alone (taken from @Dharan G's answer) will get the font into all components:

$config: mat-typography-config(
  $font-family: 'IBM Plex Sans Condensed, sans-serif'
);

@include mat-core($config);

Solution 4

If you have mat-typograph in you index.html file you need to remove it to override the mat config.

Solution 5

Looks like this is an old one, but the accepted answer did not solve it for me.

Even though the font specified in mat-typography was applied when the DOM element was inspected, visually it still was displaying the text in the wrong font.

I managed to get it to work by having angular apply the font class like this:

.font-fix {
  font-family: '<custom-font>';
}

<div [class.font-fix]="true">Text displayed correctly!</div>

View more solutions

Comments

[galki]

offical docs and this article explain themes in detail too

[danwellman]

Neither of those places explains typography

[galki]

They do say how to get what you want with less code... ill post an answer.

[danwellman]

Thanks, this was super useful!