CLOSED - Angular Material Typography doesn't work properly

Question

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?

Answer 1

Please can you add in your css.

body {
    font-family: 'Indie Flower', cursive;
}

It works on my side