[Flutter] AssetsでTextウィジェットのフォントを変更する

Flutterの標準フォントだと一部の漢字が中国語表記になっているため、変更したいと思う方も多いと思います。
そこで今回は前回使用したAssetsフォルダにフォントファイルを設置して、Textウィジェットのフォントを変更する方法を紹介します！
前回の画像同様に、フォントファイルもローカルに保持することで描画するたびに通信が発生することがなく、画面描画の速度向上と通信量の削減が見込めます。

一方でインターネットのフォントを表示する方法もあります。こちらはパッケージの導入だけで非常に簡単なため、合わせてお試しください！
　→ GoogleFontsでTextのフォントを変更する

フォントをダウンロードする

フォントファイルは .ttf/.otf/.ttc という拡張子のファイルが使用されています。
様々なサイトで配布されていますので、お気入りのフォントを探してダウンロードしてみてください！
ここではGoogle Fontsを使用した方法を紹介します。

まずはGoogle Fontsにアクセスします。
↓のようなページが開いたら、フォントを検索してみてください！
左のLanguageフィールドにJapaneseを指定すると日本語フォント一覧が表示されます。

今回は綺麗なフォントとして広く使用されているNoto Sansをダウンロードしてみます。
リンクが見つからない方はこちらからどうぞ
GotFont → Download all と進んでフォントファイルをダウンロードします。
.zipファイルになっていると思いますので、解凍して中身をご確認ください。

フォントを配置する

Flutterプロジェクトの直下にassetというフォルダを作成します。
この中に先ほどダウンロードしたフォントファイルを設置してください。
↓の画像のようになっていればOKです！

pubspec.yamlに追記

assetsフォルダ内のデータを読み込ませるために、pubspec.yamlにassetsの存在を教えてあげます。
pubspec.yaml を開いて一番下までスクロールをし、flutter: 項目を以下のように編集します。

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/

  fonts:
    - family: noto
      fonts:
        - asset: assets/NotoSansJP-Thin.ttf
          weight: 100
        - asset: assets/NotoSansJP-ExtraLight.ttf
          weight: 200
        - asset: assets/NotoSansJP-Light.ttf
          weight: 300
        - asset: assets/NotoSansJP-Regular.ttf
          weight: 400
        - asset: assets/NotoSansJP-Medium.ttf
          weight: 500
        - asset: assets/NotoSansJP-SemiBold.ttf
          weight: 600
        - asset: assets/NotoSansJP-Bold.ttf
          weight: 700
        - asset: assets/NotoSansJP-ExtraBold.ttf
          weight: 800
        - asset: assets/NotoSansJP-Black.ttf
          weight: 900

assets: では使用するローカルフォルダを指定しています。フォントファイルを格納したフォルダのパスを与えることで、そのフォルダ直下のファイルをアプリ内で使用できるようになります

fonts: では自分で用意したフォントの設定を行います。
family: には好きな名前を入れてください。後にアプリ内で使用するフォント名になります。

Textウィジェットに設定する

TextウィジェットのstyleにfontFamilyを設定することでフォントを反映させられます。
“noto” の部分はpubspec.yamlに記述した family: “noto” と一致していればOKです！
しかし、毎回styleを設定するのも大変ですのでプロジェクト内全てのTextにフォントを指定する方法を今度紹介いたします～^^b

Text(
  "フォント使用例です(noto)",
  style: TextStyle(
    fontFamily: "noto",
  ),
);

全体コード

最後に紹介したnotoを適用したTextと標準フォントのTextを見比べるデモをご紹介します。

import "package:flutter/material.dart";

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // デバッグバナーを非表示
      home: Scaffold(
        appBar: AppBar(
          title: const Align(alignment: Alignment.center, child: Text("Asset Font Demo")),
        ),
        body: const Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 16),
              Text(
                "フォント使用例です(noto)",
                style: TextStyle(
                  fontFamily: "noto",
                  fontSize: 20,
                ),
              ),
              SizedBox(height: 16),
              Text(
                "フォント使用例です(標準)",
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 40),
              Text(
                "notoを使えば標準の中華フォントも直せます",
                style: TextStyle(
                  fontFamily: "noto",
                  fontSize: 16,
                ),
              ),
              SizedBox(height: 10),
              Text(
                "直認化細 (noto)",
                style: TextStyle(
                  fontFamily: "noto",
                  fontSize: 20,
                ),
              ),
              SizedBox(height: 16),
              Text(
                "直認化細 (標準)",
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}