Flutter Tips💡 – カスタムフォントを使ってみよう

フォントを変えてみよう

Flutterでは、フォントを変更することができます🙌

例えば、

  • テーマ全体でカスタムフォントを適用させたい…
  • AppBarのタイトルだけフォントをおしゃれなものにしたい…
  • 文字列の”一部分”だけフォントを変更したい…

というような事ができるようになっています😉

今回はこのようなカスタムフォントを適用させる方法について、

公式のドキュメントを参考に実際に動かしながら解説していこうと思います✨

参考:Use a custom font – Flutter

①ダウンロードサイトから好きなフォントを手に入れる

まずはフォントファイルをダウンロードしましょう。

「フォントダウンロードサイト」から、好きなフォントをダンロードします👌

ここでは3つのフォントダウンロードサイトをご紹介します🙌

Google Fonts

Googleが完全無料で提供しているフォントサイトです。

利用料金すべて無料
商用すべてOK
フォント総数約1,000
日本語対応フォント数約10
公式サイトリンクhttps://fonts.google.com/?subset=japanese

フォントフリー

すべて日本語フォント&無料で提供されているフォントサイトです。

利用料金すべて無料
商用個別で規約あり(必ず確認しましょう)
フォント総数約400
日本語対応フォント数約400
公式サイトリンクhttp://fontfree.me/

フォント専門サイト fontnavi

検索機能がとても充実しており、目的のフォントを探し出すのに便利なサイトです。

ただ、一通り見た感じ無料フォントはなさそうです。

利用料金有料
商用個別で規約あり(必ず確認しましょう)
フォント総数1,0000以上
日本語対応フォント数約3,400
公式サイトリンクhttps://fontnavi.jp/index.aspx

⚠️フォントをアプリ内で使用する際の注意⚠️

上記のサイトをご覧の通り、いろんなフォントがあって便利なのですが

いくつか気をつけないといけない事があります。

それはフォントにも「著作権」があるということです。

誰かが作ったものですので、あたりまえですね😅

フォントによっては、”こういった使用パターンに限る”などの規約が決められている場合があり、これを破ると大変なことになります(それはもう大変です)。

これはフォントによって様々ですので、かならず使用前に確認するようにしましょう⚠️

詳しい解説を行っている記事を見つけましたので、下にリンクを張っておきますね😉

参考:フリーフォント、正しく使えてますか?ルールを守ってグラフィック作品に活かそう! | はたらくビビビット by Vivivit, Inc.

②フォントをプロジェクトへ追加する

さぁ、フォントを手に入れたら

次はアプリのプロジェクトへ取り込んでいきましょう🙌

フォント用フォルダを作成する

Android Studioを開き、Flutterプロジェクトのルート下にフォントを入れるフォルダを作成します

①プロジェクトのルート直下にassetsフォルダ作成
②assets下にfontsフォルダ作成
③プロジェクト/assets/fontsフォルダができた

フォントデータをfontsフォルダへ移動(またはコピー)する

フォントファイルは「.ttf」または「.otf」の拡張子がついています🙌

ダウンロードしたフォントによっては複数のフォントデータが存在する場合がありますが、

必要なファイルをコピーして先程作成したassets/fontsフォルダ下に貼付けましょう。

リソースの設定方法については、こちらの記事でも解説しています😆✨

③pubspec.yamlでリソースを指定

プロジェクトにフォントデータを取り込んだら、

次は「pubspec.yaml」で使用するフォントを宣言します。

  fonts:
    - family: KosugiMaru
      fonts:
        - asset: assets/fonts/KosugiMaru-Regular.ttf
    - family: NotoSerifJP
      fonts:
        - asset: assets/fonts/NotoSerifJP-Regular.otf
        - asset: assets/fonts/NotoSerifJP-Bold.otf
          weight: 700
  • family: … フォントを表す任意の名前をつけることができます。これはフォント指定時の名前になります
  • fonts: … フォントを指定していきます。
  • fotns: asset: … ルートからのパスを指定します。
  • fonts: asset: weight: …ファイル内のアウトラインのウェイトを100の整数倍として、100〜900の範囲で指定。これらの値はFontWeightに対応し、TextStyleオブジェクトのfontWeightプロパティで使用できます。

宣言後はターミナルで”flutter packages get“を実行するか、

pubspec.yamlの右上にある”packages get”をポチッとしておきましょう👌✨

これをしないと認識されません!

④フォントを適用する

pubspec.yamlでの宣言が済んだら、

やっとこさフォントを使えるようになります😆

それでは実際に適用してみましょう✨

テーマ全体に適用させる

(左)無指定、(中央)KosugiMaru、(右)NotoSerifJP

上の写真を確認すると、中央のテキストだけでなくAppBarにも同じフォントが適用されていますよね👌

アプリ全体に適用したい場合、アプリのルートウィジェットへ記述していきます😉

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'サンプルアプリ',
      theme: ThemeData(

        // フォントファミリー名を指定します
        fontFamily: "KosugiMaru",

        // fontFamily: "NotoSerifJP",
      ),
      home: HomeScreen(),
    );
  }
}

部分的に適用させる

上の写真では、Textウィジェットごとにフォントを変えて表示しています。

この場合は、Textウィジェットのstyleパラメータに指定していきます🙌

// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(fontSize: 50),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                fontFamily: "KosugiMaru",
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                fontFamily: "NotoSerifJP",
              ),
            ),
          ],
        ),

// 省略

文字列を縦や横に並べる方法については、こちらの記事を御覧ください😆

もっと文字列のスタイルを変えてみたい!

その他にもFlutterには、

テキストのスタイル(見た目)を変える方法はたくさんあります😆✨

ぜひこちらの記事も見てみてください🙌