guide - angular material tutorial
Material angular y fuentes cambiantes. (2)
De esta guía oficial :
La personalización de la tipografía es una extensión de la temática basada en Sass de Angular Material. Similar a crear un tema personalizado, puede crear una configuración de tipografía personalizada.
Por lo tanto, incluya esta línea en su archivo index.html , enlazando con alguna fuente externa:
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
Luego ponga en su archivo styles.scss la configuración de tipografía personalizada, ajustando la cadena de la familia de fuentes para la fuente seleccionada:
@import ''~@angular/material/theming'';
$custom-typography: mat-typography-config($font-family: ''"Oswald", sans-serif;'');
@include mat-core($custom-typography);
Un tema personalizado completo, con colores y todo, es algo como:
@import ''~@angular/material/theming'';
$custom-typography: mat-typography-config($font-family: ''"Oswald", sans-serif;'');
@include mat-core($custom-typography);
$custom-primary: mat-palette($mat-blue);
$custom-accent: mat-palette($mat-amber);
$custom-theme: mat-light-theme($custom-primary, $custom-accent);
@include angular-material-theme($custom-theme);
Eso es.
Puede encontrar más información sobre tipografía personalizada en esta publicación .
La fuente utilizada en las muestras son de Google Fonts .
Solo me pregunto cómo puedo cambiar las fuentes predeterminadas en material angular ...
El valor predeterminado es Roboto y no pude encontrar una manera de cambiar esto a una fuente diferente.
Puede usar el selector * CSS en su CSS o SCSS :
* {
font-family: Raleway /* Replace with your custom font */, sans-serif !important;
/* Add !important to overwrite all elements */
}
EDITAR : A partir de 2.0.0-beta.7 , puede personalizar la tipografía creando una configuración de tipografía con la función mat-typography-config e incluyendo esta configuración en la angular-material-typography :
@import ''~@angular/material/theming'';
$custom-typography: mat-typography-config(
$font-family: ''Raleway''
);
@include angular-material-typography($custom-typography);
Alternativamente ( 2.0.0-beta.10 y más):
// 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);