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.

Answer 1

Starting Angular 15, previous most voted answer will no longer work.

UPDATE 05/2024: This solution still work perfectly for Angular 16 and Angular 17.

1. Concerning Typography

You can define it just like you showed, but keep in mind that when you change the font, you will probably have to change typography sizes.

If you want to do it, here is a working example:

@use '@angular/material' as mat;
@include mat.core();

$typography-config: mat.define-typography-config(
  $font-family: '"Open Sans", "Helvetica Neue", sans-serif',
  $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.define-typography-level(34px, 40px, 400),
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $headline-6: mat.define-typography-level(20px, 32px, 400),
  $subtitle-1: mat.define-typography-level(16px, 28px, 400),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400),
  $subtitle-2: mat.define-typography-level(16px, 28px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
);

In your theme definition, don't forget to add defined typography configuration

$light-primary: mat.define-palette($light-primary-palette, 500);
$light-accent: mat.define-palette($light-accent-palette, 500);
$light-warn: mat.define-palette($light-warn-palette, 500);

$theme-light: mat.define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    warn: $light-warn
  ),
  typography: $typography-config
));

$dark-primary: mat.define-palette($dark-primary-palette, 500);
$dark-accent: mat.define-palette($dark-accent-palette, 500);
$dark-warn: mat.define-palette($dark-warn-palette, 500);

$theme-dark: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn
  ),
  typography: $typography-config
));

And don't forget to apply hierarchy:

@include mat.typography-hierarchy($typography-config);

2. Concerning dark theme

Please note that if you define a dark theme alonside with a light theme, you shoud not use:

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-themes($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

but instead, use:

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-colors($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

By doing it the right way, you will avoid typography definition duplication.

Answer 2

In Angular 15,

    $my-typography: mat.define-typography-config($font-family: '"Open Sans", "Helvetica Neue", sans-serif');
    
    @include mat.typography-hierarchy($my-typography);

$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  ),
  typography: $my-typography
));

Answer 3

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

1. 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"
>

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

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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>