Flutter のフォント指定

公式docs:
https://docs.flutter.dev/cookbook/design/fonts

フォントファイルを直接ダウンロードして適用する方法の解説記事
https://zenn.dev/flutteruniv_dev/articles/20220419-143426-flutter-custom-fonts

解説記事のサンプルをforkして欧文フォント+fallbackの和文フォントをやってみた拙文
https://zenn.dev/flutteruniv_dev/articles/81f55378562428

諸々をパッケージに任せたい。
https://pub.dev/packages/google_fonts
google_fonts パッケージは HTTP経由で色々なフォントを使えるが、webフォントはうまく表示されないことがあるので利用を躊躇していた。しかし、よくよく確認してみるとHTTP経由せずにフォント読み込みできるらしい。やってみる。

Themeのfontを以下のようにするとfallbackで欧文と和文が適用できた。
google_fontsにはfontからtextThemeを作ってくれるが、それだとfallbackが適用されなかった為。

 final theme = ThemeData(
      ...
      // 欧文フォントにleagueGothic、和文フォントにnotoSansJpを使用
      fontFamily: GoogleFonts.leagueGothic().fontFamily,
      fontFamilyFallback: [GoogleFonts.notoSansJp().fontFamily ?? 'Roboto'],
      ...
    );

MaterialApp.themeに設定したfontが反映されずに詰まった。
darkTheme に ThemeData.dark()を設定しており、 themeを見ていなかったからだった。

main で以下を呼ぶ。HTTP通信したくない。

  if (!kDebugMode) {
    // GoogleFontsのフォントを事前に読み込み、HTTPリクエストを無効化する
    // ただし開発中はDLしていないフォントを使うことがあるので、適用しない
    GoogleFonts.config.allowRuntimeFetching = false;
  }