Angular Material Font Family Switch

Question

I can't seem to find any documentation regarding using a different font in Angular Materials. Is this possible through the framework?

Answer 1

This is the official documentation on the subject, but it doesn't specify how to provide backup family classes if a font can't load: https://material.angular.io/guide/typography

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

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
      $font-family: monospace,
      $headline: mat-typography-level(32px, 48px, 700),
      $body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

Edit; for backup font-families (notice the quoting):

$font-family: '"Sintony", Arial, sans-serif'

Edit; if you had a custom font in /assets

@font-face {
    font-family: 'MyWebFont';
    src: url('/assets/webfont.eot');
}

$font-family: '"MyWebFont", Arial, sans-serif'