Flutter のフォント指定

kenty (ケンティー)

公式docs:

kenty (ケンティー)

フォントファイルを直接ダウンロードして適用する方法の解説記事

kenty (ケンティー)

解説記事のサンプルをforkして欧文フォント+fallbackの和文フォントをやってみた拙文

kenty (ケンティー)

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

kenty (ケンティー)

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

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

kenty (ケンティー)

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

kenty (ケンティー)

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

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