Angular 18 Material 2 set of font-family

Im' using Angular 18 and Material 2 and I'm trying to set a font-family 'Poppins' overal to this mat-tab-group my it's never applied and I don't know why

HTML:

<div>
<mat-tab-group class="container-div">
<mat-tab label="DIFFUSION"> </mat-tab>
<mat-tab label="MESSAGE"> </mat-tab>
</mat-tab-group>
</div>


scss:

$theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$violet-palette,
tertiary: mat.$red-palette,
),
density: (
scale: 0
)
));

body {
@include mat.button-theme($theme);
@include mat.button-density($theme);
@include mat.all-component-themes($theme);
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

// In the typography instead of caption it should be button, but the button is not working.
$typography: mat.m2-define-typography-config(
$font-family: 'Poppins, sans-serif',
$headline-1: mat.m2-define-typography-level(50px, 50px, 300, $letter-spacing: -1.5px),
$headline-2: mat.m2-define-typography-level(60px, 72px, 300, $letter-spacing: -0.5px),
$headline-3: mat.m2-define-typography-level(48px, 56px, 400, $letter-spacing: 0px),

@include mat.button-theme($typography);
@include mat.typography-hierarchy($typography);
@include mat.button-typography($typography);

Continue reading...