Material typography in custom SCSS ?

[Cristiano]

Hello group,

I would like some assistance with typography customization.

I'm creating an angular 4 + material (2.0.0-beta.7) app and I'm following this page in order to change the font size of all material components being used.

In my testing app I added the following in its style.scss:

@import '~@angular/material/theming';

    $custom-typography: mat-typography-config(

     $font-family:   'Roboto, "Helvetica Neue", sans-serif',

     $display-4:     mat-typography-level(90px, 110px, 300),

     $display-3:     mat-typography-level(50px, 54px, 400),

     $display-2:     mat-typography-level(40px, 45px, 400),

     $display-1:     mat-typography-level(30px, 38px, 400),

     $headline:      mat-typography-level(20px, 28px, 400),

     $title:         mat-typography-level(18px, 30px, 500),

     $subheading-2:  mat-typography-level(14px, 26px, 400),

     $subheading-1:  mat-typography-level(13px, 22px, 400),

     $body-2:        mat-typography-level(10px, 20px, 500),

     $body-1:        mat-typography-level(9px, 20px, 400),

     $caption:       mat-typography-level(10px, 20px, 400),

     $button:        mat-typography-level(7px, 12px, 500)

   );

   // Override typography CSS classes

   @include mat-base-typography($custom-typography);

But I can't see those changes in the browser.

What am I missing ?

regards,

Cristiano