angular material typography override - pass 2 configs to mat-core?

1
votes

In Angular with Material installed I'm trying to override Material Typography to include 2 different fonts.

  1. I want 'Roboto' for all body/button/caption text,
  2. and 'Roboto-Condensed' for all heading/title/display text.

What's the best way to do this?

Here's what I've done in my SCSS files so far:

($title-font = Roboto-Condensed, $primary-font = Roboto)

// https://material.angular.io/guide/typography 

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

// Define a custom typography config that overrides the font-family as well as the other `headlines` and `body-1` levels. 
$custom-heading-typography: mat-typography-config(
  $font-family: $title-font,
  $display-4: mat-typography-level($d4, $disp-line-ht, $light),
  $display-3: mat-typography-level($d3, $disp-line-ht, $regular),
  $display-2: mat-typography-level($d2, $title-line-ht, $regular),
  $display-1: mat-typography-level($d1, $title-line-ht, $regular),
  $headline: mat-typography-level($h1, $title-line-ht, $bold),
  $title: mat-typography-level($h2, $title-line-ht, $regular),
  $subheading-2: mat-typography-level($h3, $title-line-ht $regular),
  $subheading-1: mat-typography-level($h4, $title-line-ht, $light),
);
$custom-body-typography: mat-typography-config(
  $font-family: $primary-font,
  $body-1: mat-typography-level($primary-fs, $primary-line-ht, $regular),
  $body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
  $caption: mat-typography-level($font-sm, $caption-line-ht, $regular),
  $button: mat-typography-level($primary-fs, $disp-line-ht, $medium),
  $input: mat-typography-level(inherit, $input-line-ht, $regular),
);

I also want to change various font styles, like font-size, line-height, weight, etc..., so I didn't just focus on setting font-family per text class.

This doesn't work (passing 2 configs) :

// Override the typography in the core CSS.
@include mat-core($custom-heading-typography, $custom-body-typography);

I created 2 different typography configs, one for title text and one for body text. they both work on their own if I pass them to mat-core, but I'm trying to pass both to mat-core at the same time--is this typography override with 2 different font-families possible, or should I go about this another way?

Even with just 1 font, there are problems:

When I include only one of the configs in the mat-core mixin, it changes ALL text elements to be the font family (the heading config with result in paragraphs, buttons, and list-items being 'Roboto-Condensed').

I also tried to include one of the two configs in these directives per the Material.Angular typography docs, but the behavior is unpredictable, and may also result in all elements having the same font-family.

Tried this: 

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-heading-typography);

Also tried this:

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-heading-typography);
1
angularangular-materialoverridingcustomizationtypography

1 Answers

0
votes

I think I figured this Angular Material Typography problem out.

  1. You can have 2 font families (or more?), one for each of 2 different configs (I have one for headings, one for body texts),
  2. as long as you use the 'and' SCSS/SASS operator between the two configs in the Angular.Material typography SCSS constructor.

Here's a truncated example of setting up 2 configs:

(one for headings [Roboto Condensed], one for body texts [Roboto])

// First custom Material typography config
$custom-heading-typography: mat-typography-config(
  /* First font family ('Roboto Condensed') */
  $font-family: $title-font,
  // ...
  $display-1: mat-typography-level($d1, $title-line-ht, $regular),
  $headline: mat-typography-level($h1, $title-line-ht, $regular),
  // ...
);
// Second custom Material typography config
$custom-body-typography: mat-typography-config(
  /* Second font family ('Roboto') */
  $font-family: $primary-font,
  // ...
  $body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
  $caption: mat-typography-level($primary-fs, $caption-line-ht, $light),
  // ...
);

Here's the angular material part where you override mat-base-typography.

Notice the simple 'and' operator between the two configs in the @include statement.

It seems to work, but I will get wildly different font stylings if I switch the order of the config declarations. Because of this, I'm not certain it's the "correct" solution, but it's the best I've found in all my searching...

// Override typography for all Angular Material, including mat-base-typography and all components.
/* This works if you put the typography configs in the correct order!? */
@include angular-material-typography($custom-heading-typography and $custom-body-typography);

Here's a poorly-written blog on this,

...where I try a couple methods, first thinking this way doesn't work, then deciding maybe it does.

https://krisbunda.com/blog/2020/08/01/use-2-fonts-in-your-angular-material-custom-typography-config/

I should rewrite it, but at least you'll find more images and snippets that I tried, if you want to dig more into this problem.