Angular Material and changing fonts

Angular Material and changing fonts

Angular Material and changing fonts

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 [email protected]/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 [email protected]/material/theming;
$custom-typography: mat-typography-config(
  $font-family: Raleway
);
@include mat-core($custom-typography);

Refer to Angular Materials 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>

From this official guide:

Typography customization is an extension of Angular Materials
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 [email protected]/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 [email protected]/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);

Thats 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.

Angular Material and changing fonts

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

styles.scss

@use [email protected]/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);

Related posts on Angular Material :

Leave a Reply

Your email address will not be published.