How to change the font family in material v18

I am following the documentation of

https://material.angular.io/guide/theming#defining-a-theme

// From documentation

$theme: mat.define-theme((

typography: (
brand-family: 'Open Sans',
bold-weight: 900
),
));

html {
@include mat.core-theme($theme);
@include mat.all-component-themes($theme);
@include mat.all-component-typographies($theme);
}


and tried the answer from

Font-Family Change on Angular Material

// Answer based on stackoverflow

$my-theme: mat.define-theme($config: (
typography: (
plain-family: '"Open Sans", sans-serif',
brand-family: '"Open Sans", sans-serif',
),
),);

:root {
@include mat.all-component-typographies($my-theme);
}


none of the options worked. Let me know how to change the font family on material v18

PS: Do not comment there are already answers. Those are for previous versions which do not work for v18

Continue reading...