Set specific font for bold text in Angular Material

Question

I'm using two custom fonts in my Angular application, one for normal text and one for bold text. I want to shift towards Angular Material, but I can't figure out how to set the bold font in it.

This is how I set my custom font in styles.scss:

@font-face {
  font-family: CustomFont;
  src: url(assets/font.ttf) format("truetype");
}

@font-face {
  font-family: CustomBoldFont;
  src: url(assets/font-bold.ttf) format("truetype");
}
    
@import '~@angular/material/theming';

$custom-typography: mat-typography-config(
  $font-family: 'CustomFont, sans-serif'
);

@include mat-base-typography($custom-typography);

How do I tell Angular Material to use CustomBoldFont in e.g. h1-h6, b, th, etc? I tried setting my own rules but they are overridden.

Answer 1

You have to apply mat-typography class to parent of element on which you want your custom typography to be applied.

Excerpt from official typography guide: By default, Angular Material doesn't apply any global CSS. To apply the library's typographic styles more broadly, you can take advantage of the mat-typography CSS class. This class will style all descendant native elements.

<!-- By default, Angular Material applies no global styles to native elements. -->
<h1>This header is unstyled</h1>

<!-- Applying the mat-tyography class adds styles for native elements. -->
<section class="mat-typography">
  <h1>This header will be styled</h1>
</section>

if that still doesn't work, most likely an issue is with the way you are adding font-family, try if following works:

$custom-typography: mat-typography-config(
  $font-family: '"CustomFont", sans-serif'
);

Answer 2

Use something like this

@font-face {
    font-family: "CustomFont";
    src: url("assets/font.ttf");
}
@font-face {
    font-family: "CustomFont";
    src: url("assets/font-bold.ttf");
    font-weight: bold;
}