1

I need to change the font of my app but I'm having a hard time doing it.
I've added under assets/font the files for the font:

enter image description here

Then in styles.scss:

@include mat-core();

$WebClientTemplateJwtA8-primary: mat-palette($mat-indigo);
$WebClientTemplateJwtA8-accent: mat-palette($mat-pink, A200, A100, A400);

$WebClientTemplateJwtA8-warn: mat-palette($mat-red);
$WebClientTemplateJwtA8-theme: mat-light-theme($WebClientTemplateJwtA8-primary, $WebClientTemplateJwtA8-accent, $WebClientTemplateJwtA8-warn);
@include angular-material-theme($WebClientTemplateJwtA8-theme);

html, body { height: 100%; font-size: 16px; font-size: 1rem; font-family: 'Lato', sans-serif;}

But it doesn't apply my custom font.

User978438
  • 149
  • 1
  • 3
  • 13

1 Answers1

0

I am a newbie and cannot add comments.

Have you already referred to the font files somewhere in css?

In order to use the custom fonts, you need to specify something like-

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

This can be done either in your glocal styles.scss/css, or you could create another css/scss file for this purpose and then specify the same in the styles section in angular.json

You can find more details in this answer- How to import a new font into a project - Angular 5

mypseudonym
  • 51
  • 3
  • Hi, thank you for the answer. Having all these src for font, how should I add it in font-face? – User978438 Jul 10 '20 at 15:24
  • You should be able to add multiple @font-face rules/declarations. Just change the name and url. In fact, you can have multiple declarations for the same family too, that differ based on other font properties like font-weight. – mypseudonym Jul 10 '20 at 16:56