97

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.

Mel
  • 5,837
  • 10
  • 37
  • 42
Nav
  • 4,450
  • 10
  • 53
  • 84
  • 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

7 Answers7

124

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>
Edric
  • 24,639
  • 13
  • 81
  • 91
  • 3
    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
  • this assumes Im using Sass right? what if i just have normal css – rex Jan 19 '23 at 10:30
  • @rex Newer versions of Angular Material (v15+) now use the theming system from Material Components for Web, which uses CSS variables. (I'm not aware as to whether older versions of Angular Material used CSS variables though) – Edric Jan 22 '23 at 09:11
97

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.

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
fabianopinto
  • 1,825
  • 15
  • 22
  • How to import a .otf font file instead of using a CDN link? – Bernardo OS Jul 17 '20 at 15:47
  • About using .oft fonts, check [this answer](https://stackoverflow.com/a/3245187/1621107). – fabianopinto Jul 23 '20 at 09:42
  • 2
    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
  • 1
    As pointed by @NateMay, it changed with v12, so check [here](https://material.angular.io/guide/typography). – fabianopinto Jul 09 '21 at 07:15
  • 2
    Thanks, worked for me with Angular 11, but using `mat-core` instead of `mat.core` – bfredo123 Mar 12 '22 at 19:05
  • 2
    This no longer works in V15 as mat.core() no longer takes any arguments. I've looked at the material documentation but I still can't figure out how to change the font. Worked in previous versions. Here is my code: `use '@angular/material' as mat;` `use "sass:map";` `$custom-typography: mat.define-typography-config( $font-family: 'Poppins' ); ` `@include mat.core($custom-typography); // fails here` – ustad Dec 09 '22 at 03:34
11

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

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.

millenion
  • 1,218
  • 12
  • 16
  • Thanks for this answer! Do you know how to make this apply to regular tags too (h1, h2, p, etc.) – Steven Aug 01 '23 at 20:51
8

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);
Sathwik Gangisetty
  • 268
  • 5
  • 17
5

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"
>
  1. 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);
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Tanmay Ingole
  • 73
  • 2
  • 9
3

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
));
mathan
  • 455
  • 3
  • 10
1

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.

ALLABOUT TECH
  • 11
  • 1