Angular Material v15 のフォントを変える

Angular Materialのフォント（だけ）を変える方法について、新しめの日本語情報が見つからなかったので記事化します。
お困りの方のお役に立てれば幸いです。
誤り等ありましたらご指摘ください。

# やりたいこと

Angular Materialの全コンポーネントのフォントを「Roboto」から「Noto Sans JP」に変える

before:
![2023-05-15 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2404513/dae65c41-433d-b893-3372-922f3e27b6e1.png)

after:
![2023-05-15 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2404513/21f0e8c9-58ad-1c4f-18b0-d48c50601948.png)

（違いがわかりにくいのでおまけ）「Rampart One」:
![2023-05-15 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2404513/8b2ef3b2-67d3-38e2-a9d1-3dc8818a7c13.png)


# 環境

※Angular v15です。最新の16では未確認です。

```
Angular CLI: 15.2.8
Node: 18.16.0
Package Manager: npm 9.6.6
OS: win32 x64

Angular: 15.2.9
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.2.8
@angular/cli                    15.2.8
@schematics/angular             15.2.8
rxjs                            7.8.1
typescript                      4.9.5
```

# 手順

## 使いたいフォントを用意する

Google Fontsの手順に従い、`index.html`でフォントをインポート
```diff_html:index.html
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
```

## CSSでフォントを設定（Angular Materialには影響なし）

```diff_scss:styles.scss
  html, body { height: 100%; }
- body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+ body { margin: 0; font-family: "Noto Sans JP", sans-serif; }
```

`styles.scss`で`body`のフォントを変えたので、Angular Materialではない部分のフォントは変わりました。
・・・しかし、ボタンやツールチップ、テーブルのフォントは元のRobotoのままです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2404513/51e1cd8c-9da5-07a6-57d8-01ff7d75bfbf.png)

## Angular Materialの全コンポーネントのフォント設定を変更

Angular Materialのコンポーネントのフォントを変えるには、`styles.scss`を以下のように編集します。

```diff_scss:styles.scss
+ @use "@angular/material" as mat;

  html, body { height: 100%; }
  body { margin: 0; font-family: "Noto Sans JP", sans-serif; }

+ $myapp-typography: mat.define-typography-config(
+     $font-family: '"Noto Sans JP", sans-serif',
+ );
+ @include mat.all-component-typographies($myapp-typography);
```

`mat.define-typography-config()`で設定値のオブジェクトを作り、`mat.all-component-typographies()`で反映します。

### 余談

```node_modules\\@angular\\material\\_index.scss
@forward './core/typography/all-typography' show all-component-typographies,
  define-rem-typography-config, define-typography-config;
```

上記より、`define-typography-config()`や`all-component-typographies()`が`node_modules\@angular\material\core\typography\_all-typography.scss`で定義されているのを見つけることができました。
`font-family`以外にも色々設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2404513/e397a205-e348-06ab-8f95-69828e55744b.png)

# 参考

- [Customizing Typography | Angular Material](https://material.angular.io/guide/typography)
    - 安心の公式
- [Angular Materialの見た目をカスタマイズしたい - JBS Tech Blog](https://blog.jbs.co.jp/entry/2023/02/07/084530)
    - v15。フォント以外についても詳しく書かれています（実際はこれくらい色々カスタムするのが普通？）
- [Angular Material のFontを変更する](https://zenn.dev/longbridge/articles/53bd55b140f2b9)
    - v13で少し古いですが、参考にさせていただきました。