Solo me preguntaba cómo puedo cambiar las fuentes predeterminadas en Angular Material ...
El valor predeterminado es Roboto y no pude encontrar una manera de cambiar esto a una fuente diferente.
Puede usar el selector universal CSS ( * ) en su CSS o SCSS :
* { font-family: Raleway /* Replace with your custom font */, sans-serif !important; /* Add !important to overwrite all elements */ } A partir de Angular Material v2.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 ( v2.0.0-beta.10 y superior):
// 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);Consulte la documentación tipográfica de Angular Material para obtener más información.
Nota: Para aplicar las fuentes, agregue la clase mat-typography al padre donde se deben aplicar sus fuentes personalizadas:
<body class="mat-typography"> <h1>Hello, world!</h1> <!-- ... --> </body>De esta guía oficial :
La personalización tipográfica es una extensión de la tematización basada en Sass de Angular Material. De forma similar a la creación de un tema personalizado, puede crear una configuración de tipografía personalizada.
Por lo tanto, incluya esta línea en su archivo index.html , vinculando a alguna fuente externa:
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> Luego coloque 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 totalmente personalizado, con colores y todo, es algo así como:
@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);Eso es todo.
Puede encontrar más información sobre la tipografía personalizada en esta publicación .
La fuente utilizada en las muestras es de Google Fonts .
Actualizar:
Como comentó @Nate May , cambió con v12, así que consulte la documentación actualizada sobre la recomendación actual para tipografía personalizada.
Pocos métodos están en desuso en Angular Material 13. Para cambiar la familia de fuentes predeterminada en Angular Material, los nuevos métodos/configuración se encuentran a continuación
index.html . <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 $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);