Overriding Angular Material body typography
@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);
}
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);
}
}
}
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);