【Flutter】カスタムフォントの使い方【初心者向け】

本記事では、Flutter上でカスタムフォントを使う方法について説明します。

参考：Flutter公式　Use a custom font

はじめに

iOS/Androidは、それぞれがOS標準の素晴らしいフォントを持っています。しかし、UX/UIデザイナーからカスタムフォントを使うように依頼されることがよくあると思います。完全に独自のカスタムフォントを使うケースもあれば、Google Fontで公開されているものを使うケースもあるでしょう。

①フォントをインポートする

まずはじめにフォントファイルをプロジェクトに組み込む必要があります。フォントファイルは、プロジェクト直下にあるfontsかassetsフォルダに入れるのが一般的です。

Flutterは.ttfと.otf拡張子に対応していますが、.woffや.woff2拡張子には対応していません。

②pubspecで使用するフォントを宣言します

ファイルを配置したら、pubspec.yamlファイル内で使用するフォントファイルを宣言する必要があります。以下の形でyamlファイルに追記します。

• family:  fontFamilyプロパティやTextStyleオブジェクトで指定する際の名前
• assets: pubspec.yamlファイルから見たフォントファイルの相対パス
• style: assetで指定したフォントファイルのスタイルを指定
  • デフォルトで適用されるわけではありません。以下の例では、TextStyleでitalicを指定すると、Raleway-Italic.ttfが使われる、ということを意味しています
• weight: assetで指定したフォントファイルのweight（太さ）を指定
  • styleと同じように、デフォルトで適用されるわけではありません。Robotomo-Bold.ttfを使いたい場合は、テキストのfontWeightをFontWeight.w700に適用すればOKです。

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

③カスタムフォントを適用する

Themeからアプリ全体に適用する方法と、Widget単体で指定する方法の２種類があります。

参考：【Flutter】テーマ(Theme)の使い方【初心者向け】

以下の例はアプリ全体にThemeとして適用する例です。ThemeのfontFamilyプロパティに、pubspec.yamlで定義したフォント名（familyで指定したもの）を入力すれば適用されます。

return MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: const MyHomePage(),
);

次の例は、Widget単体に適用する方法です。Textのstyle に対して、TextStyleを使って直接フォントを指定できます。

body: const Center(
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),

注意：

この時、必ずpubspec.yamlでfamilyに指定した名前と一致するようにしてください。誤った名前を指定すると、フォントが正しく適用されません。Flutterが自動で適用すべきフォントを探して適用します。（他で指定していなければアプリデフォルトのものが適用される）

実際の動き

これまでのサンプルを実際に動かしてみましょう。

まずはフォントをGoogle Fontからダウンロードします（今回の例ではRobotoMonoとRaleWay）。そして、プロジェクトで以下のように指定します。ホットリロードを使って、適用するフォントを変更してみたりしましょう。

参考：【Flutter】ホットリロードとは？【効率向上】

• pubspec.yaml

flutter:
# インデントの階層に注意しましょう。インデントが誤っていると適用されません（筆者も１度はまった）
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

• main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Raleway をアプリのデフォルトフォントに指定
      // 以降、テキストWidgetに勝手に反映される
      theme: ThemeData(fontFamily: 'Raleway'),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBarでは、上で指定したRalewayフォントが適用される
      appBar: AppBar(title: const Text('Custom Fonts')),
      body: const Center(
        // 以下のText Widgetでは、RobotoMonoフォントを適用する
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}