Angular Material 12でカスタムフォントを変更する方法

フォントファミリーの設定: Angular Materialのコンポーネントは、通常、CSSクラスを使用してスタイルされます。カスタムフォントを適用するには、該当するコンポーネントのCSSクラスを特定し、font-familyプロパティを追加します。例えば、mat-buttonコンポーネントにカスタムフォントを適用するには、次のようにします。
```
.mat-button {
 font-family: 'CustomFont', sans-serif;
}
```
上記の例では、CustomFontという名前のカスタムフォントを使用しています。適用したいコンポーネントのCSSクラスとカスタムフォントのファミリー名を適宜変更してください。
グローバルなスタイルの変更: アプリケーション全体にカスタムフォントを適用したい場合は、styles.cssファイルまたはAngularのグローバルスタイルシートであるstyles.scssファイルに、以下のようなスタイルを追加します。
```
* {
 font-family: 'CustomFont', sans-serif;
}
```
上記の例では、アプリケーション内のすべての要素にカスタムフォントが適用されます。
Angular Materialテーマの変更: Angular Materialでは、テーマを使用してコンポーネントのスタイルをカスタマイズすることができます。カスタムフォントをテーマに適用するには、styles.scssファイル内でテーマの設定を行います。以下に例を示します。
```
@import '~@angular/material/theming';
$custom-theme: mat.define-light-theme(
 (
   typography: (
     font-family: 'CustomFont',
     // 他のフォント関連の設定
   )
 )
);
@include mat.all-component-themes($custom-theme);
```
上記の例では、CustomFontという名前のカスタムフォントをテーマに適用しています。他のフォント関連の設定も同様に行うことができます。

これらの方法を使用することで、Angular Material 12でカスタムフォントを変更することができます。必要に応じて、詳細なスタイリングやフォント関連の設定を行ってください。