Thursday, 1 October 2020

Set specific font for bold text in Angular Material

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.



from Set specific font for bold text in Angular Material

No comments:

Post a Comment