Angular Material and changing fonts

angular, angular-material

Solution

You can use the CSS universal selector (`*`) in your `CSS` or `SCSS`:

* {
  font-family: Raleway /* Replace with your custom font */, sans-serif !important; 
  /* Add !important to overwrite all elements */
}

Starting from Angular Material `v2.0.0-beta.7`, you can customise the typography by creating a typography configuration with the `mat-typography-config` function and including this config in the `angular-material-typography` mixin:

@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);

@include angular-material-typography($custom-typography);

Alternatively (`v2.0.0-beta.10` and up):

// NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin:
@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);
@include mat-core($custom-typography);

Refer to Angular Material's typography documentation for more info.

Note: To apply the fonts, add the `mat-typography` class to the parent where your custom fonts should be applied:

<body class="mat-typography">
  <h1>Hello, world!</h1>
  <!-- ... -->
</body>

Problem

Just wondering how I can change default fonts in Angular Material ... The default is Roboto and I couldn't find a way to change this to different font.

Original source

Related problems