Modify angular material typography

I am implementing a SASS, which helps me to modify the variables that angular material has preset to change colors and fonts. It's not working for me and I think I have all the aspects. The colors are recognized, but the typography is not changing.

This is my themes.scss file

@use '@angular/material' as mat;
@import '~@angular/material/theming';
@import '../fonts/source-serif-pro/source-serif-pro-fonts';
@include mat-core();

$bjorn-font-family: 'Source Serif Pro' !default;

$bjorn-headline-typography: mat.define-typography-level(32px, 120%, 600, $bjorn-font-family, 0) !default;
$bjorn-title-typography: mat.define-typography-level(24px, 120%, 600, $bjorn-font-family, 0) !default;
$bjorn-subheading-2-typography: mat.define-typography-level(20px, 120%, 600, $bjorn-font-family, 0) !default;
$bjorn-subheading-1-typography: mat.define-typography-level(16px, 120%, 600, $bjorn-font-family, 0) !default;

$bjorn-typography: mat.define-typography-config(
  $font-family: $bjorn-font-family,
  $headline: $bjorn-headline-typography,
  $title: $bjorn-title-typography,
  $subheading-2: $bjorn-subheading-2-typography,
  $subheading-1: $bjorn-subheading-1-typography,
);

$bjorn-primary-color: (
  50 : #e6e6e6,
  100 : #c1c1c1,
  200 : #989898,
  300 : #6f6f6f,
  400 : #505050,
  500 : #313131,
  600 : #2c2c2c,
  700 : #252525,
  800 : #1f1f1f,
  900 : #131313,
  A100 : #ef6c6c,
  A200 : #ea3e3e,
  A400 : #f50000,
  A700 : #db0000,
  contrast: (
      50 : #000000,
      100 : #000000,
      200 : #000000,
      300 : #ffffff,
      400 : #ffffff,
      500 : #ffffff,
      600 : #ffffff,
      700 : #ffffff,
      800 : #ffffff,
      900 : #ffffff,
      A100 : #000000,
      A200 : #ffffff,
      A400 : #ffffff,
      A700 : #ffffff,
  )
);

$bjorn-secondary-color: (
    50 : #eef0f2,
    100 : #d4d9de,
    200 : #b8c0c8,
    300 : #9ba6b1,
    400 : #8593a1,
    500 : #708090,
    600 : #687888,
    700 : #5d6d7d,
    800 : #536373,
    900 : #415061,
    A100 : #bbdbff,
    A200 : #88c0ff,
    A400 : #55a5ff,
    A700 : #3b97ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$bjorn-tertiary-color: (
  50 : #f0e0e0,
    100 : #dab3b3,
    200 : #c18080,
    300 : #a84d4d,
    400 : #952626,
    500 : #820000,
    600 : #7a0000,
    700 : #6f0000,
    800 : #650000,
    900 : #520000,
    A100 : #ff8585,
    A200 : #ff5252,
    A400 : #ff1f1f,
    A700 : #ff0505,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

$bjorn-primary-palette: mat-palette($bjorn-primary-color);
$bjorn-secondary-palette: mat-palette($bjorn-secondary-color);
$bjorn-tertiary-palette: mat-palette($bjorn-tertiary-color);

$bjorn-light-theme: mat-light-theme((
  color:(
    primary: $bjorn-primary-palette,
    accent: $bjorn-secondary-palette,
    warn: $bjorn-tertiary-palette
  ),
  typography: $bjorn-typography
));

@include angular-material-theme($bjorn-light-theme);

This is my source-serif-pro-fonts-scss file

@font-face {
  font-family: 'Source Serif Pro';
  src: url('./SourceSerifPro-Bold.ttf') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('./SourceSerifPro-SemiBold.ttf') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('./SourceSerifPro-Regular.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
}

I downloaded the typography from this site

And finally this is my angular.json file (Only styles imports)

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/assets/ui/themes.scss",
  "node_modules/ngx-toastr/toastr.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  "src/styles.scss"
],

What did I miss? Thank you for your comments