Angular Material and changing fonts

Question

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.

look at this issue: https://github.com/angular/material2/issues/205 — Ahmed Musallam, May 03 '17 at 02:13
I think the problem with Material styling is that yes you can change the global font and styles, but sometimes you just want use the defaults and change just parts, and not everyone is using SASS. After all the whole point of material components is their plug and play usability. So I adopted a view of just making the changes as required using the ::ng-deep syntax on just the components that needed them. — Darren Street, Dec 19 '20 at 12:43

Edric · Accepted Answer · 2020-07-18T14:39:31.683

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>

As of V12 it is --- mat.define-typography-config($font-family: 'Raleway') --- and don't forget to import the new font's CDN — Nate May, Jul 03 '21 at 05:04

score 92 · Answer 2 · edited Nov 17 '21 at 10:01

From this official guide:

Typography customization is an extension of Angular Material's Sass-based theming. Similar to creating a custom theme, you can create a custom typography configuration.

So, include this line in your index.html file, linking to some external font:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

Then put in your styles.scss file the custom typography settings, adjusting the font-family string for the selected font:

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat.core($custom-typography);

A full custom theme, with colors and all, is something like:

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat.core($custom-typography);

$custom-primary: mat.define-palette($mat-blue);
$custom-accent: mat.define-palette($mat-amber);
$custom-theme: mat.define-light-theme($custom-primary, $custom-accent);
@include mat.all-component-themes($custom-theme);

That's it.

You can find more info about custom typography in this post.

The font used in the samples are from Google Fonts.

Update:

As commented by @Nate May, it changed with v12, so check the updated documentation about the current recommendation for custom typography.

About using .oft fonts, check [this answer](https://stackoverflow.com/a/3245187/1621107). — fabianopinto, Jul 23 '20 at 09:42
As of V12 it is --- mat.define-typography-config($font-family: '"Oswald", sans-serif;') --- and don't forget to import the new font's CDN — Nate May, Jul 03 '21 at 05:06
As pointed by @NateMay, it changed with v12, so check [here](https://material.angular.io/guide/typography). — fabianopinto, Jul 09 '21 at 07:15
Thanks, worked for me with Angular 11, but using `mat-core` instead of `mat.core` — bfredo123, Mar 12 '22 at 19:05

score 4 · Answer 3 · answered Jul 06 '21 at 10:14

Do this When using custom theme for latest angular material (12)

styles.scss

@use '~@angular/material' as mat;
@font-face {
   font-family: 'custom-font';
   src: url('assets/custom-font.ttf');
 }
$custom-typography: mat.define-typography-config(
  $font-family: "custom-font"
);
@include mat.core($custom-typography);

score 4 · Answer 4 · edited Mar 11 '22 at 19:26

Few methods are deprecated in Angular Material 13. To change the default font family in Angular Material the new methods/configuration is below

First change the css link of font in index.html file.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2? family=Titillium+Web:wght@300;400;600;700&display=swap"
    rel="stylesheet"
>

Second write below configuration in styles.scss file

$custom-typography: mat.define-typography-config($font-family:'"Titillium Web",sans-serif');

$custom-theme: mat.define-light-theme((typography: $custom-typography));

@include mat.core($custom-typography);
@include mat.all-component-themes($custom-theme);

score 1 · Answer 5 · answered Apr 11 '21 at 04:58

You can easily override the mat-typography-config to set the font type and values of different variables

.custom-typography {
  @include angular-material-typography($custom-typography);
}

$custom-typography: mat-typography-config(
  $font-family: "Quicksand, sans-serif",
);

Take look at the article https://www.universal-tutorial.com/angular-tutorials/angular-typography which has a demo as well.

Angular Material and changing fonts

5 Answers5