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

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

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

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

AngularMaterialのボタンやナビゲーションのフォントは
デフォルトではRobotoというフォントになっています。
これを変更するにはmat-typography-configを使います。

まず、プロジェクトのsrcフォルダとかに
適当なscssファイル(今回はmytheme.scss)をつくって以下のように書きます
(もともと色を変えたりでカスタムテーマを使っている場合はその.scssファイルでOKです。)

mytheme.scss

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

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

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

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

angular.json

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


これでmythemeが反映されます。

次にフォントをGoogle Fontsから探してきて
index.htmlのheadに↓のように書きます。

index.html

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

これでAngularMaterialのフォントがデフォルトから変更できます。

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

style.css

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

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

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