CODEWITHSUNDEEP
angularmaterial-designangular-material
danwellman
danwellman

Reputation: 9253

Overriding Angular Material body typography

I've created a custom theme using Angular Material (v 5.2.4) in an Angular (v 5.2.0) app.

my-theme.scss:

@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);
  @include angular-material-typography($my-typography);
}

I've also added the class names mat-app-background mat-typography to the body in the index.html page for my app.

When I add the my-theme class to the container of my app (inside the body), then all of the material components do get the custom font (for things like radio button labels, etc), but nothing outside of a component gets it.

I've also tried using the angular-material-typography() and mat-base-typography() mixins to no avail.

How can I override the fonts from the mat-typography class?

Upvotes: 7

Views: 22153

Answers (5)

Ancel Miller
Ancel Miller

Reputation: 31

If you have mat-typograph in you index.html file you need to remove it to override the mat config.

Upvotes: 3

Sterex
Sterex

Reputation: 1028

Looks like this is an old one, but the accepted answer did not solve it for me.

Even though the font specified in mat-typography was applied when the DOM element was inspected, visually it still was displaying the text in the wrong font.

I managed to get it to work by having angular apply the font class like this:

.font-fix {
  font-family: '<custom-font>';
}

<div [class.font-fix]="true">Text displayed correctly!</div>

Upvotes: 1

galki
galki

Reputation: 8715

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);

Upvotes: 4

danwellman
danwellman

Reputation: 9253

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);
    }
  }
}

Upvotes: 3

Dharan Ganesan
Dharan Ganesan

Reputation: 453

    @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);
    }

Upvotes: 12

Related Questions