How does typography work in the new angular material 3?

I am using Angular v20.0.0 and angular material v20.0.3.

I have the following styles.scss, which is basically directly from the Theming guide:

@use '@angular/material' as mat;

html {
color-scheme: light dark;
@include mat.theme((
color: mat.$azure-palette,
typography: Roboto,
));
}


My index.html has this on the body:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MaterialDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>


Again, that too came directly out of a schematic.

However, all the fonts on regular text and even in button labels are NOT Roboto.

I see that mat-typography isn't even a class that shows up in the Chrome Developer tools.

What is the intended way of styling typography? Am I supposed to apply something like to the body, i.e., in the app.component.scss? (Is this the new way of applying these styles??)

:root {
font-family: var(--mat-sys-label-large-font)
}


I am a bit confused as to how to apply the styles in the new Material 3 approach.

Continue reading...