Using two different Fonts in Angular Material

user_6612197 0
Viewed 2117

i created my own custom theme with a custom font:

@import '~@angular/material/theming';
@include mat-core();
$custom-typography: mat-typography-config($font-family: '"work sans",    sans-serif;');
@include mat-core($custom-typography);

Now i want to use the font "Oswald" for every header(h1-h6). How can i do this?

angular-material angular
3 Answers

It is possible to configure a different font per each typography level. Something like this:

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


$custom-typography: mat-typography-config(
    $font-family: 'default font',
    $headline: mat-typography-level(112px, 112px, 300, 'another font'),
    $title: mat-typography-level(56px, 56px, 400, 'and another font'),
);
@include mat-core($custom-typography);

The Angular Material documentation doesn't show the font-family parameter, but you can see it in the source code.

user_17036750

You simply can define CSS rules for all your h tags.

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald";
}

You can define this rule in your styles.css in ./src.

user_47819750

_typography.scss

@use '~@angular/material' as mat;

$font-family-primary: "'Roboto', sans-serif";
$font-family-accent: "'Playfair Display', serif";

$mat-typography-primary-config: mat.define-typography-config(
  $display-4: mat.define-typography-level(112px, 112px, 300, $font-family-primary, $letter-spacing: -0.05em),
  $display-3: mat.define-typography-level(56px, 56px, 400, $font-family-primary, $letter-spacing: -0.02em),
  $display-2: mat.define-typography-level(45px, 48px, 400, $font-family-primary, $letter-spacing: -0.005em),
  $display-1: mat.define-typography-level(34px, 40px, 400, $font-family-primary),
  $headline: mat.define-typography-level(24px, 32px, 400, $font-family-accent),
  $title: mat.define-typography-level(20px, 32px, 500, $font-family-primary),
  $subheading-2: mat.define-typography-level(16px, 28px, 400, $font-family-primary),
  $subheading-1: mat.define-typography-level(15px, 24px, 400, $font-family-accent),
  $body-2: mat.define-typography-level(14px, 24px, 500, $font-family-primary),
  $body-1: mat.define-typography-level(14px, 20px, 400, $font-family-primary),
  $caption: mat.define-typography-level(12px, 20px, 400, $font-family-primary),
  $button: mat.define-typography-level(14px, 14px, 500, $font-family-primary),
  $input: mat.define-typography-level(inherit, 1.125, 400, $font-family-primary)
);

styles.scss

@import './styles/typography';

@include mat.core($mat-typography-primary-config);

good implementation ;)

user_169075830
Related