AngularMaterialのフォントを変更する方法

こんにちは。レモンティーです。

今回はAngularMaterialのフォントを変更する方法です。

Google FontsのフォントをAngularMaterialに設定します。
fonts.google.com

AngularMaterialのボタンやナビゲーションのフォントは
デフォルトではRobotoというフォントになっています。
このフォントを個別に上書きするのは面倒ですし
かといってstyle.cssなどで
*みたいな広範囲に影響するセレクタで強引にフォントを変えると
mat-iconのフォントまで上書きされるなど副作用がでるので
それらを修正する必要があり面倒です。

そこでmat-typography-configの出番です。

まず、プロジェクトのsrcフォルダとかに
適当な.scssファイルをつくって以下のように書きます
(もともと色を変えたりでカスタムテーマを使っている場合は
その.scssファイルでOKです。
↓の真ん中の3行を追記してmat-coreに$custum-typographyを渡せばできます。)

mytheme.scss

@import '~@angular/material/theming';

$custom-typography: mat-typography-config(
  $font-family: 'Nunito,sans-serif'
);

@include mat-core($custom-typography);

次にangular.jsonファイルのstylesに
以下のように先ほどつくった.scssファイルを追加します。

"styles": [
    "src/styles.css",
    "src/mytheme.scss"
]


これでフォントの変更が反映されます。

今回使ったフォント自体はGoogle Fontsからで
index.htmlのheadに↓のように書くと使用できます。

 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">


ちなみに先ほどの.scssファイルで変更したのはあくまで
mat-buttonなどのAngularMaterialに関する部分のフォントなので
それ以外の部分は普通にstyle.cssでフォントを指定します。

body { margin: 0; font-family: 'Nunito', sans-serif;}

これでページが好きなフォントになりましたね。

今回はこれでおしまいです。
www.sawalemontea.com