【Flutter】日本語フォントの追加

概要

Flutterデフォルトの日本語フォントが、微妙に変。
Googleフォントから任意のフォントをダウンロードして適用する方法。

• 筆者は、本記事の情報によって発生した損害について、筆者に故意又は重過失がある場合を除き、一切の責任を負わないものとします。
• 本記事で提供する情報について、いかなる保証も行いません。

ダウンロード

Googleフォントはこちら
https://fonts.google.com/

今回はNoto Sans Japaneseを使ってみる。
https://fonts.google.com/noto/specimen/Noto+Sans+JP?query=noto+sans+japanese

右上のGet Fontからダウンロード。

プロジェクトへの追加

プロジェクト直下にassetsフォルダを作成して、ダウンロードしたフォントを以下のように配置。

pubspec.yaml

pubspec.yamlに以下を追加。

pubspec.yaml

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

適用

MaterialAppのthemeを以下のように変更。

main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.dark(primary: Colors.deepPurple),
+       fontFamily: "Noto Sans JP",
      ),
      home: const HomePage(),
    );
  }
}