Menu
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.
212
To customize component typography for your entire application, you can pass your custom typography config to the core mixin described in the theming guide. @use '@angular/material' as mat; $my-custom-typography: mat. define-typography-config( $headline: mat. define-typography-level(3rem, 1, 700), ); @include mat.
The typology of the angular material is based on the guidelines derived from the material design imagery and organized within the typography level. Each level has a size, line height, and font-weight. CSS classes are provided for typography. You can use them to create visual consistency across your application.
add("custom-theme"); With adding class="mat-app-background" to the <body> tag, the correct background color will take effect. As you call @include angular-material-theme($custom-theme); within your custom custom-them-css-class mixin, the mat-app-background css-selector will become a nested selector.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
