アプリに共通のカスタムフォントをセットする

やること

• カスタムフォントのダウンロード
• カスタムフォントの配置
• pubspec.yamlに追記
• MaterialAppで指定する。

1. カスタムフォントのダウンロード

• 割愛。Google Fontsなどから好きなフォントをダウンロードしてください。
• 自分はNotoSansJPをセットしました。

2. プロジェクトの任意のディレクトリにカスタムフォントを配置してください。

• 自分はルートディレクトリにstatic/fontsという階層構造を作り、その中にフォントを配置しました。

3. pubspec.yamlにカスタムフォントの格納場所とフォント名を追記します。

pubspec.yaml

flutter:
  fonts:
  - family: NotoSansJP #フォント名
    fonts:
      - asset: static/fonts/NotoSansJP-Regular.ttf #格納したディレクトリパス

• インデントや記述場所が違うとコンパイルエラーが発生します。

4. MaterialAppでフォントの共通設定を行います。

main.dart

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
        fontFamily: 'NotoSansJP' // pubspec.yamlで指定したfamily
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: TitleListView()
      ),
    );
  }

5. flutter runして実行

• フォントが適用されていることを確認することが出来ます。

6.備考：FontWeightによって扱うファイルを変える

• 下記のように記載してください。

pubspec.yaml

flutter:
  fonts:
    - family: NotoSansJP
      fonts:
        # Thin / Hairline (100)
        - asset: static/fonts/NotoSansJP-Thin.ttf
          weight: 100
        # ExtraLight (200)
        - asset: static/fonts/NotoSansJP-ExtraLight.ttf
          weight: 200
        # Light (300)
        - asset: static/fonts/NotoSansJP-Light.ttf
          weight: 300
        # Regular (400)
        - asset: static/fonts/NotoSansJP-Regular.ttf
          weight: 400
        # Medium (500)
        - asset: static/fonts/NotoSansJP-Medium.ttf
          weight: 500
        # SemiBold (600)
        - asset: static/fonts/NotoSansJP-SemiBold.ttf
          weight: 600
        # Bold (700)
        - asset: static/fonts/NotoSansJP-Bold.ttf
          weight: 700
        # ExtraBold / Black (800)
        - asset: static/fonts/NotoSansJP-ExtraBold.ttf
          weight: 800
        # Heavy (900)
        - asset: static/fonts/NotoSansJP-Black.ttf
          weight: 900

呼び出し元.dart

Text("小説を選択する",
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.w700 // fontサイズ700
    ),
)

• ファイル名が間違っていると下記のようなエラーが発生する

Terminal.

Error: unable to locate asset entry in pubspec.yaml: "static/fonts/NotoSansJP-Heavy.ttf".
Target debug_android_application failed: Exception: Failed to bundle asset files.