CODEWITHSUNDEEP
angularjsangular-material
Howard Zoopaloopa
Howard Zoopaloopa

Reputation: 3822

Angular Material Font Family Switch

I can't seem to find any documentation regarding using a different font in Angular Materials. Is this possible through the framework?

Upvotes: 4

Views: 6048

Answers (2)

Megamind
Megamind

Reputation: 161

This is the official documentation on the subject, but it doesn't specify how to provide backup family classes if a font can't load: https://material.angular.io/guide/typography 

@import '~@angular/material/theming';

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
      $font-family: monospace,
      $headline: mat-typography-level(32px, 48px, 700),
      $body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

Edit; for backup font-families (notice the quoting):

$font-family: '"Sintony", Arial, sans-serif'

Edit; if you had a custom font in /assets

@font-face {
    font-family: 'MyWebFont';
    src: url('/assets/webfont.eot');
}

$font-family: '"MyWebFont", Arial, sans-serif'

Upvotes: 7

Patryk Łucka
Patryk Łucka

Reputation: 1043

Angular Material is implementation of Material Design and Material Design is strongly linked to Roboto font and as you mentioned, there is nothing about it in the documentation, so I think it is not possible to do that through the framework.

But you can easily change font family in css file, which needs to be included in your build after your Angular Material dependencies. Here's an example:

body {
  font-family: "Comic Sans MS";
}

input,
button,
select,
textarea {
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
}

And Demo: http://codepen.io/mattdanna/pen/pgwVzX

Borrowed from here: https://github.com/angular/material/issues/6561#issuecomment-170837189

Upvotes: 3

Related Questions