【Flutter】フォントの設定方法（GoogleFonts / Assetsに配置）

Flutterのデフォルトフォントは、「Roboto」というフォントです。

Robotoですと、”海”や”刃”など一部の感じが馴染みのない型式で表示されてしまいます。

フォント設定はすごく簡単でしたので、お好きなフォントへ変更するのがよさそうです！

フォント設定方法の比較

Flutterにフォントを設定する方法は、２種類あります。

1. Google Fontsパッケージを通してフォントを適用する
2. ダウンロードしたフォントファイル(.ttf)をAssetとしてFluttterプロジェクトに配置して使用する

2つのパターンの違い

おすすめの設定方法は………GoogleFontsパッケージ！

オフラインにフォントファイルがある必要性がある場合を除き、GoogleFontsパッケージを使用するのがよいかと思います！

フォント設定の手順

実際にFlutterにて、フォントを設定する手順をGoogleFontsを使用する場合と、Assetとして配置する場合に分けて紹介します。

GoogleFontsの場合

パッケージをインストールする

コマンド実行もしくは、pubspec.yamlに記載してgoogle_fontsパッケージをインストールします。

コマンドでインストールする場合

flutter pub add google_fonts

pubspec.yamlに記載する場合

dependencies:
 flutter:
   sdk: flutter
 google_fonts: ^X.X.X

※google_fontsの最新バージョンはこちらで確認してください！

 dartファイルへパッケージを反映する

フォント変更したいdartファイルにimport文を追記します。

import 'package:google_fonts/google_fonts.dart';

好きな箇所にフォントを設定する

アプリ全体に反映する場合

アプリ全体に統一してフォントを反映したい場合には、main.dartのMaterialAppにて、fontFamilyプロパティへGoogleFontsを設定します！

main.dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: GoogleFonts.notoSansJp(
        textStyle: TextStyle(
          fontWeight: FontWeight.w500,
        ),
      ).fontFamily,
    ),
    home: HomePage(),
  );
}

ウィジェットへ反映する場合

フォント設定するウィジェットにて、fontFamilyプロパティへGoogleFontsを設定します！

Textウィジェット

Text(
  'Google Fonts',
  style: TextStyle(
    fontFamily: GoogleFonts.notoSansJp(
      textStyle: TextStyle(
        fontWeight: FontWeight.w500,
      ),
    ).fontFamily,
  ),
),

TextFieldウィジェット(TextFormFieldも同様)

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
  style: TextStyle(
    fontFamily: GoogleFonts.notoSansJp(
      textStyle: TextStyle(
        fontWeight: FontWeight.w500,
      ),
    ).fontFamily,
  ),
),

フォントファイル読み込みの場合

フォントファイルを配置する

配置場所についてはどこでも問題ない(はず)ですが、本記事の例では、assets配下にfontsフォルダを作成して配置しています。

<Flutterプロジェクトフォルダ>
 - assets
    - fonts
       - NotoSansJP-Medium.ttf

pubspec.yamlに記載する

下記の通りフォントに関する内容を追記します。
パッケージをインストールする際の、「dependencies:」配下にある「flutter:」とは異なるので注意ください！
※1行目の「flutter:」は親なし（「dependencies:」と同じ階層）です。

flutter:
 uses-material-design: true
 fonts:
   - family: NotoSansJP-Medium（FontFamily名※）
     fonts:
       - asset: assets/fonts/NotoSansJP-Medium.ttf

※フォントを適用するときに指定する名前なので、好きな名前でOKです。（ttfファイル名など）

好きな箇所にフォントを設定する

アプリ全体に反映する場合

アプリ全体に統一してフォントを反映したい場合には、main.dartのMaterialAppにて、fontFamilyプロパティへpubspec.yamlに記載したfontFamily名を設定します！

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: 'NotoSansJP-Medium', ※pubspec.yamlのfontFamily名
    ),
    home: HomePage(),
  );
}

ウィジェットへ反映する場合

フォント設定するウィジェットにて、fontFamilyプロパティへpubspec.yamlで記載したfontFamily名を設定します！

Textウィジェット

Text(
  'Google Fonts',
  style: TextStyle(
    fontFamily: 'NotoSansJP-Medium', ※pubspec.yamlのfontFamily名
  ),
),

TextFieldウィジェット(TextFormFieldも同様)

TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
  style: TextStyle(
    fontFamily: 'NotoSansJP-Medium', ※pubspec.yamlのfontFamily名
  ),
),