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.
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>
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.
Few methods are deprecated in Angular Material 13. To change the default font family in Angular Material the new methods/configuration is below
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"
>
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);