話題のウェアラブルスピーカー開封レビューはこちら

【Flutter】.ttfなどのフォントファイルを適用する方法

ここでは自分が持っている .ttf などのフォントファイルを Flutter プロジェクトのアプリに適用する方法を紹介します。

せっかくですからあなたが好きなフォントを使ってアプリを作りたいですよね?

Bold や Light など、weight の違いのあるファイルをどのように定義して実際にアプリに表示させるかを説明しています。

また、アプリ全体に適用するフォントを指定して、さらに特定の箇所だけフォントを変更する方法にも触れています。

最後にサンプルの画像も載せていますので参照してみてください。

ざっくり手順

1. フォントファイルをプロジェクト内のディレクトリに格納する
2. 使用するフォントを pubspec.yaml で定義する
3. デフォルトのフォントを設定する
4. 特定の箇所のフォントをさらに指定する

1. フォントファイルをプロジェクト内のディレクトリに格納する

まずはご自身でお持ちのフォントファイルをプロジェクト内のディレクトリに格納しましょう。

main.dart がある lib と同じディレクトリに fonts ディレクトリを作成します。

そしてその中に使用したいフォントファイルを置きます。

今回は5種類の FuturaRound フォントファイルと1種類の Mohr フォントファイルを入れました。

project/
  fonts/
    FuturaRound-Bold.ttf
    FuturaRound-Demi.ttf
    FuturaRound-Light.ttf
    FuturaRound-Medium.ttf
    FuturaRound-Regular.ttf
    Mohr-Regular.ttf
  lib/
    main.dart
  pubspec.yaml

2. 使用するフォントを pubspec.yaml で定義する

次に、pubspec.yaml ファイルで font family を定義します。

CSS になじみのある方ならイメージがつきやすいですね。

pubspec.yaml
flutter:
  uses-material-design: true
  fonts:
    - family: FuturaRound
      fonts:
      - asset: fonts/FuturaRound-Light.ttf
        weight: 300
      - asset: fonts/FuturaRound-Regular.ttf
        weight: 400
      - asset: fonts/FuturaRound-Medium.ttf
        weight: 500
      - asset: fonts/FuturaRound-Demi.ttf
        weight: 600
      - asset: fonts/FuturaRound-Bold.ttf
        weight: 700
    - family: Mohr
      fonts:
      - asset: fonts/Mohr-Regular.ttf
        weight: 400

文字の太さによってフォントファイルが分かれているのでそれぞれの weight を定義してあげます。

Light なら weight: 300、Bold なら weight: 700 のように。

(実際、Regular などひとつのフォントファイルだけ入れて呼び出し側で FontWeight の値を指定すると太さが変わるため、ここで定義する意味が今の私にはいまいちよくわかっていないのですが、通常はこのように記述するみたいです。(fontWeight: FontWeight.w900, って書くと Bold より太くなります)知っている方がいましたらコメントで教えてください)

なお、weight に指定する数値とウェイトの関係は以下を参考にしました。ありがとうございます。

参考

Webフォントで複数のウェイトやスタイルを持つ書体を定義するQiita

3. デフォルトのフォントを設定する

さあ、それではアプリ全体に適用するフォントを指定しましょう。

MaterialApp()theme がそれに該当します。

これによって、他で特別な指定がない限りこの theme に設定したフォントがデフォルトとなります。

以下の例では Mohr をデフォルトのフォントとしました。

main.dart
MaterialApp(
  title: 'Custom Fonts',
  // Set Mohr as the default app font
  theme: ThemeData(fontFamily: 'Mohr'), // デフォルトのフォント Mohr を指定
  home: Scaffold(
    backgroundColor: Colors.red[100],
    appBar: AppBar(
      title: Text('display default app font'), // AppBar は Mohr で表示される
    ),
    body: Center
      child: // 4の内容が入ります
    ),
  ),
);

4. 特定の箇所のフォントをさらに指定する

さて、デフォルトのフォントを決めたものの、特定の箇所にこだわりのフォントを適用したいときにはどうすればよいでしょうか。

そんな場合は style で個々に指定しましょう。

以下の例では body に表示する Text() の文字フォントを FuturaRound としています。

main.dart
Text(
  'Hello Flutter!',
  textAlign: TextAlign.center,
  style: TextStyle(
    fontFamily: 'FuturaRound', // デフォルトの Mohr とは違う FuturaRound を指定
    fontSize: 60.0,
    fontWeight: FontWeight.w700, // pubspec.yaml で定義した weight700 の Bold が表示される
  ),
),

サンプルイメージ

実際のアプリの表示はどのようになるでしょうか。

ちゃんと app bar のフォントが Mohr で、body のフォントが Bold の FuturaRound になっていますね。いい感じです。

参考URL

参考

Using custom fontsFlutter

参考

Build Native Mobile Apps with FlutterUDACITY

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です