Flutterでカスタムフォントを導入してみた

Flutterアプリにカスタムフォントを導入することで、アプリのデザインに個性を持たせることができます。本記事では、カスタムフォントの導入手順をステップバイステップで解説します。

前提条件

• Flutterの開発環境が構築されていること
• 基本的なFlutterの知識があること

手順概要

1. フォントファイルをプロジェクトに追加する
2. pubspec.yamlにフォントを登録する
3. フォントをアプリ内で使用する

1. フォントファイルをプロジェクトに追加する

まず、使用したいフォントファイル（.ttfや.otf）を用意します。フリーのフォントはGoogle Fontsなどからダウンロードできます。

プロジェクトのassetsディレクトリ内にfontsフォルダを作成し、フォントファイルを配置します。

my_app/
├── assets/
│   └── fonts/
│       └── MyCustomFont.ttf
├── lib/
├── pubspec.yaml

今回はこの2つを入れてみました

• MPLUSRounded1c-Medium.ttf
• NotoSerifJP-VariableFont_wght.ttf

2. pubspec.yamlにフォントを登録する

pubspec.yamlファイルを開き、以下のように編集します。

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/fonts/MyCustomFont.ttf

複数のスタイル（太字や斜体など）がある場合:

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/fonts/MyCustomFont-Regular.ttf
        - asset: assets/fonts/MyCustomFont-Bold.ttf
          weight: 700
        - asset: assets/fonts/MyCustomFont-Italic.ttf
          style: italic

今回の場合:

  fonts:
    - family: MPLUS
      fonts:
        - asset: assets/fonts/MPLUSRounded1c-Medium.ttf
    - family: NotoSerifJP
      fonts:
        - asset: assets/fonts/NotoSerifJP-VariableFont_wght.ttf

pubspec.yamlを保存したら、以下のコマンドでパッケージを更新します。

flutter pub get

3. フォントをアプリ内で使用する

個別のウィジェットで使用する場合

Text(
  'これはカスタムフォントです',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontSize: 24,
  ),
),

アプリ全体でデフォルトフォントとして設定する場合

MaterialApp(
  title: 'Flutter Custom Font Demo',
  theme: ThemeData(
    fontFamily: 'MyCustomFont',
  ),
  home: MyHomePage(),
);

今回は比較のため、こんな感じで書きました

import 'package:flutter/material.dart';

class SamplePage1 extends StatelessWidget {
  const SamplePage1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('カスタムフォントの導入'),
      ),
      body: const Center(
        child: Column(
          children: [
            Text(
              'これはサンプルページです',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            Text(
              'これはサンプルページです',
              style: TextStyle(
                fontFamily: 'MPLUS',
                fontSize: 24,
              ),
            ),
            Text(
              'これはサンプルページです',
              style: TextStyle(
                fontFamily: 'NotoSerifJP',
                fontSize: 24,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

実行して確認する

エミュレーターや実機でアプリを実行し、フォントが正しく適用されているか確認します。

flutter run

まとめ

カスタムフォントを導入することで、アプリのデザイン性を高め、ブランドイメージを強化することができます。ぜひ自分のプロジェクトで試してみてください。