♦️

Angular Material のFontを変更する

2021/12/27に公開

Angular

tech

2021年12月27日時点のWindows10での情報です。
@angular/cli: v13.1.2
@angular/material: v13.1.1

前回は Angularに導入したMaterial Designのテーマカラーをカスタマイズしました。
Angular Material Designをカスタマイズする

今回は、Angularに導入したMaterial Designのフォントをカスタマイズします。

高密度フォント

高密度とは大きなグリフに対応できるよう行間に余裕を持たせる必要がある言語の文字のことで、中国語、日本語、韓国語が該当します。
Materialデザインで高密度の推奨フォントはNoto Sansになっています。

詳しくはこちら

MaterialデザインのデフォルトフォントはRobotoです。
今回はこのRobotoフォントを、Materialデザインの推奨和文フォントNoto Sans JP に変更します。

フォントを変更する

index.htmlのgoogleフォントを読み込み個所を変更します。

src\index.html

- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> 
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet">

styles.scssのfont-familyを変更します。

src\styles.scss

body { 
    margin: 0; 
-   font-family: Roboto, "Helvetica Neue", sans-serif;
+   font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
}

index.htmlを確認してみると、bodyタグのクラスにmat-typographyが設定されています。

src\index.html

<body class="mat-typography">
  <app-root></app-root>
</body>

このmat-typographyで使用されるフォントを変更するには、
styles.scssファイルで以下のように設定します。

src\styles.scss

@use '@angular/material' as mat;

$myapp-typography: mat.define-typography-config($font-family: 'Noto Sans JP');
@include mat.core($myapp-typography);

ちなみにdefine-typography-config()は
「node_modules@angular\material\core\typography\_typography.scss」で定義されています。
第一引数の$font-familyは省略可能で、省略された時のデフォルト値は'Roboto, "Helvetica Neue", sans-serif'になっています。

以上で、Angular Material Designのフォントが変更できました。

高密度フォント

フォントを変更する

Discussion