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 '~@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.