title: Overriding Angular Material body typography
body: <p>I've created a custom theme using Angular Material (v 5.2.4) in an Angular (v 5.2.0) app.</p>
  
  <p>my-theme.scss:</p>
  
  <pre><code>@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);
  }
  </code></pre>
  
  <p>I've also added the class names <code>mat-app-background mat-typography</code> to the <code>body</code> in the index.html page for my app.</p>
  
  <p>When I add the <code>my-theme</code> class to the container of my app (inside the <code>body</code>), then all of the material components <strong>do</strong> get the custom font (for things like radio button labels, etc), but nothing outside of a component gets it.</p>
  
  <p>I've also tried using the <code>angular-material-typography()</code> and <code>mat-base-typography()</code> mixins to no avail.</p>
  
  <p>How can I override the fonts from the <code>mat-typography</code> class?</p>