CODEWITHSUNDEEP
angularangular-materialtypographycustom-themeangular-material-theming
beanic
beanic

Reputation: 562

CLOSED - Angular Material Typography doesn't work properly

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?

Upvotes: 0

Views: 1272

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

Please can you add in your css.

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

It works on my side

Upvotes: 2

Related Questions