Zenn
🦉

【Flutter】カスタムフォントの導入方法

2022/04/19に公開
Flutter
tech

はじめに

デフォルトフォントの Roboto だと漢字が中華風になってしまいますので、好きなフォントを導入して見栄えを良くしましょう。ちなみに私のお気に入りは Murecho です。

Roboto（デフォルト） Murecho（カスタム）
Roboto Murecho

環境

Flutter 2.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5464c5bac7 (13 hours ago) • 2022-04-18 09:55:37 -0700
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

手順

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

一番手っ取り早いのが Google Fonts から好きなフォントをダウンロードしてくることです。他にもいろんなサイトから無料でダウンロードできます。フォントファイルの拡張子は .ttf や .otf が多いです。

https://fonts.google.com/?subset=japanese

今回は、Google Fonts から Murecho フォントをダウンロードしてきました。ダウンロードした zip ファイルを展開して次のように保存しておきます。

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

pubspec.yaml を編集する

flutter セクションにフォント関連の宣言を追記します。インデントに注意して下さい。編集後は flutter pub get を忘れずに。

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

アプリ全体にカスタムフォントを適用する

MaterialApp に与える ThemeData の fontFamily プロパティにカスタムフォント名（pubspec.yaml の family で指定したフォント名）を指定することでアプリ全体にカスタムフォントを適用することができます。お手軽ですね。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
+       fontFamily: 'Murecho',
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

個別にカスタムフォントを適用する

例えば、Text に適用する場合は次のように style プロパティで指定ができます。

Text(
  'テキスト',
+ style: TextStyle(
+   fontFamily: 'Murecho',
+ ),
);

カスタムフォント名を定数として扱いたい

カスタムフォント名（'Murecho'）は文字列なので typo の心配があります。できれば FontFamily.murecho みたいに定数として扱いたいですよね。そんなときは flutter_gen_runner を使いましょう。

flutter_gen_runner の使い方は下記のサイトに詳しく載っています。

https://wasabeef.medium.com/fluttergen-25149caea94f

検証アプリ

今回の検証をするために、動的にカスタムフォントを切り替えるアプリを作りました。Google Fonts で FontWeight が 5 種類以上あって人気の高いフォントを選びました。

検証アプリ

コードはこちらで公開しています。参考にして下さい。

https://github.com/susatthi/flutter-sample-fonts

最後に

Flutter 大学という Flutter エンジニアに特化した学習コミュニティに所属しています。オンラインでわいわい議論したり、Flutter の最新情報をゲットしたりできます！ぜひ Flutter 界隈を盛り上げていきましょう！

https://flutteruniv.com?invite_id=9hsdZHg0qtaMIr6RPRulAaRJfA83

Discussion