I can't get this working on my web app, so I created a new project (Angular 15) from the cli, and added material using "ng add @angular/material".
I edited app.component.html to be simply be
<div>
<h1>This is an h1.</h1>
<h2>This is an h2.</h2>
</div>
Now the good stuff. My styles.scss is
@use '@angular/material' as mat;
@include mat.core();
$my-typography: mat.define-typography-config();
@include mat.typography-hierarchy($my-typography);
$my-custom-typography-config: mat.define-typography-config(
$headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
);
@include mat.typography-hierarchy($my-custom-typography-config);
When I inspect the h1, Chrome DevTools shows
What am I missing to get this app to read the values I'm trying to set? I tried setting it as part of a theme in my real app, but I couldn't get these typography settings working there either.
Ensure you've added the class to your
index.html. Verify whether the<body>tag includes theclass="mat-typography". If it's missing, add it like this: