[flutter]Goole Fontsのフォントを使う方法

2023年3月28日

Index

手順

googlefontsから使いたいフォントをダウンロードする

①GoogleFontsにアクセスする

アクセスすると以下のような画面が出てくるので、好きなフォントを探す。

②フォントをダウンロードする

今回はAIKatraというフォントをダウンロードしてみます。

画面右下にあるdownload allボタンを押せば良い

③ダウンロードしたzipファイルを解凍する

README.txt:ライセンスについて書かれているので、適宜確認する

ttfファイル:flutterに読み込ませるファイル

Flutterに読み込ませる

①fontsフォルダを作成する

②fontsフォルダにttfファイルをコピーする

③pubspec.yamlファイルを編集する

以下のように記述します。

# To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: Alkatra　#fontを呼び出す時の名前
      fonts:
        - asset: fonts/Alkatra-VariableFont_wght.ttf#ダウンロードしたファイルのパスを記述

# To add custom fonts to your application, add a fonts section here,

# in this "flutter" section. Each entry in this list should have a

# "family" key with the font family name, and a "fonts" key with a

# list giving the asset and other descriptors for the font. For

# example:

fonts:

- family: Alkatra　#fontを呼び出す時の名前

fonts:

- asset: fonts/Alkatra-VariableFont_wght.ttf#ダウンロードしたファイルのパスを記述

コードを書く

fontFamilyに先ほどpubspec.yamlに指定したfamilyを記述すれば良い。

Center(
          child: Text(
            'test',
            style: TextStyle(
              fontFamily: 'Alkatra',
              fontSize: 50,
              color: Colors.white,
            ),
          ),
        ),