Angular Material and changing fonts

Angular Problem Overview

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.

Angular Solutions

Solution 1 - Angular

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>

Solution 2 - Angular

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.

Solution 3 - Angular

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

Solution 4 - Angular

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

Solution 5 - Angular

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Nav	View Question on Stackoverflow
Solution 1 - Angular	Edric	View Answer on Stackoverflow
Solution 2 - Angular	fabianopinto	View Answer on Stackoverflow
Solution 3 - Angular	Sathwik Gangisetty	View Answer on Stackoverflow
Solution 4 - Angular	Tanmay Ingole	View Answer on Stackoverflow
Solution 5 - Angular	ALLABOUT TECH	View Answer on Stackoverflow