0

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.

Peter
  • 323
  • 1
  • 16
  • 46
  • Hey @Peter! I have added my suggestions but if you still face the issue, would you be able to share stackblitz? – Dipen Shah Oct 01 '20 at 11:14

2 Answers2

1

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;
}
Salal Aslam
  • 1,367
  • 4
  • 16
  • 32
  • I've tried this but does not work, still everything is non-bold. If I remove the non-bold @font-face declaration, the h1 tag becomes bold as intended, and normal text does not become bold, BUT the normal text is Arial. – Peter Sep 29 '20 at 18:06
0

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'
);
Dipen Shah
  • 25,562
  • 1
  • 32
  • 58
  • Angular Material marked the body element with mat-typography by default. I've tried the ' "CustomFont' " trick but did not work. If I inspect the h1 it says calculated: font: 400 24px/32px CustomFont,sans-serif; which should be bold, however it's not. If I explicitly add font-weight: bold it becomes bold. I didn't have this issue with the default Roboto font. – Peter Oct 01 '20 at 20:02
  • interesting, would you be able to share mvp? – Dipen Shah Oct 01 '20 at 20:03
  • Ok so I changed the @font-face directive's font-weight attribute from bold to 400 and it works now...strikethrough this, now everything is bold. :) – Peter Oct 01 '20 at 20:06