I am trying to create my custom theme for Angular Material but when I apply the typography some elements change its own fonts but not in all the application. For example, for links doesn't works and for grid lists elements neither(I didn't notice if it occurs with more material components). Here is my code:
font.scss
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
$fontConfig: mat-typography-config(
$font-family: "'Indie Flower', cursive",
$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),
$subheading-1: mat-typography-level(15px, 24px),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500),
$caption: mat-typography-level(12px, 20px, 400),
$input: mat-typography-level(inherit, 1.125, 400),
);
theme.scss
@import '~@angular/material/theming';
@import './helpers/font';
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $my-theme-foreground,
background: $my-theme-background,
);
}
$custom-theme-primary: mat-palette($mat-green);
$custom-theme-accent: mat-palette($mat-blue);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: create-custom-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);
@include mat-core($fontConfig);
styles.scss
@import "~@angular/material/theming";
@import '../themes/helpers/font';
.
.
.
any idea?
