【Flutter】カスタムフォントの使い方｜日本語フォントをGoogle Fontsから取得

2022 4/05

2022年2月9日 2022年4月5日

今回は「Google Fonts」のフォントをFlutterアプリで使用できる「カスタムフォント」の使い方について解説します。

カスタムフォントの使い方

Google Fontsからフォントをダウンロード

まずはGoogle Fontsからアプリで使用したいフォントをダウンロードします。（今回は「Hina Mincho」をダウンロード）

ダウンロードが完了したらzipファイルを解凍しておきます。

「ttf」ファイルを「fonts」ディレクトリに移動

プロジェクト直下にfontsディレクトリを作成し、解凍したフォルダに入っているttfファイル（HinaMincho-Regular.ttf）をfontsディレクトリに移動させます。

pubspec.yaml「flutter」にフォントを追加

flutter:
#ここから下
  fonts:
    - family: HinaMincho
      fonts:
        - asset: fonts/HinaMincho-Regular.ttf

pubspec.yaml「flutter」に上記のようにコードを追記します。他のフォントを使用する場合は「HinaMincho」の部分を置き換えてください。

書き終えたらpub.getを更新します。これでカスタムフォントを使用できるようになりました。

ダウンロードしたフォントを使用する

カスタムフォントをTextで使用する場合「style > TextStyle > fontFamiryプロパティ」で使用するフォントを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('カスタムフォント'),
        ),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontFamily: 'HinaMincho',
              fontSize: 50,
            ),
          ),
        ),
      ),
    );
  }

アプリ全体で使用する

カスタムフォントをアプリ全体で使用する場合「MaterialApp > theme > ThemeData > fontFamily」で使用するフォントを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'HinaMincho'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('カスタムフォント'),
        ),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 50,
            ),
          ),
        ),
      ),
    );
  }

以上です。