Angular Material and changing fonts
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.
Answer
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>