flutterアプリのフォントを変更してみた

flutterのデフォルトフォントはなんとなく好きではないので、自分好みのフォントに変更してみました。

手順１：好みのフォントを入手する

様々なサイトで無料フォントが公開されております。
権利さえあれば何を使用しても構いません。

私は GoogleFont から探すことにしました。

最初に表示された日本語対応フォントのNoto Sans Japaneseを使用することにします。
Noto Sans Japaneseをクリックし、遷移先ページの右上の「Get font」→「Download all」とクリックします。

これにより、Noto_Sans_JP.zipと言う圧縮ファイルがダウンロードされました。

手順２：フォントをプロジェクト内に配置する

次はダウンロードした圧縮ファイルを解凍し、プロジェクト内に配置します。 プロジェクトルートにassets/fontフォルダを作成し、解凍したフォルダをそのままコピーします。

assets/
└── fonts/
    └── Noto_Sans_JP/
        ├── NotoSansJP-VariableFont_wght.ttf
        ├── OFL.txt
        ├── README.txt
        └── static/
            ├── NotoSansJP-Black.ttf
            ├── NotoSansJP-Bold.ttf
            ├── NotoSansJP-ExtraBold.ttf
            ├── NotoSansJP-ExtraLight.ttf
            ├── NotoSansJP-Light.ttf
            ├── NotoSansJP-Medium.ttf
            ├── NotoSansJP-Regular.ttf
            ├── NotoSansJP-SemiBold.ttf
            └── NotoSansJP-Thin.ttf

手順３：pubspec.yamlを編集する

pubspec.yaml内のflutterブロックにfontを追加します。
ファイル内をfontで検索すると記述例部分がヒットするので、該当箇所が見つかったら、インデントに気を付けて以下の記述を貼り付けます。

flutter:
 fonts:
   - family: Noto_Sans_JP
     fonts:
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Thin.ttf
         weight: 100
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-ExtraLight.ttf
         weight: 200
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Light.ttf
         weight: 300
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Regular.ttf
         weight: 400
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Medium.ttf
         weight: 500
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-SemiBold.ttf
         weight: 600
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Bold.ttf
         weight: 700
       - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-ExtraBold.ttf
         weight: 800
       - asset: assets/fonts/Noto_Sans_JP/static/Noto_Sans_JP-Black.ttf
         weight: 900
uses-material-design: true

編集後に以下のコマンドを実行してください。 - flutter pub get

手順４：フォントを適用する

pubspec.yamlに記述したフォントファミリー名を、MaterialAppのThemeDataのfontFamilyプロパティにセットすることでアプリ全体にフォントを適用することができます。

  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return MaterialApp.router(
      routerDelegate: ref.watch(routerProvider).routerDelegate,
      routeInformationParser: ref.watch(routerProvider).routeInformationParser,
      routeInformationProvider:
          ref.watch(routerProvider).routeInformationProvider,
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: 'Noto_Sans_JP',
     ),
    );
  }
}

カスタムフォントを適用することができました。