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

コンテンツ

Android と iOS では高品質のシステムフォントが提供されていますが、デザイナーからの最も一般的なリクエストの 1 つはカスタムフォントです。たとえば、デザイナーがカスタム構築したフォントがあるとします。または、次からフォントをダウンロードした可能性があります。Google フォント。

Flutter はカスタムフォントで動作し、カスタムフォントを適用できます。アプリ全体または個々のウィジェットにフォントを適用します。このレシピでは、カスタムフォントを使用するアプリを作成します。次の手順:

フォントファイルをインポートします。
pubspecでフォントを宣言します。
フォントをデフォルトとして設定します。
特定のウィジェットでフォントを使用します。

1. フォントファイルをインポートする

フォントを操作するには、フォントファイルをプロジェクトにインポートします。フォントファイルをfontsまたassetsFlutter プロジェクトのルートにあるフォルダー。

たとえば、Raleway および Roboto Mono フォントをインポートするにはファイルをプロジェクトに追加すると、フォルダー構造は次のようになります。

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

サポートされているフォント形式

Flutter は次のフォント形式をサポートしています。

.ttc
.ttf
.otf

flutterはサポートしていません.woffと.woff2すべてのプラットフォーム用のフォント。

2. pubspec でフォントを宣言する

フォントを特定したら、そのフォントを見つける場所を 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

`pubspec.yaml`オプションの定義

のfamilyで使用するフォントの名前を決定します。fontFamilyの財産TextStyle物体。

のassetフォントファイルへのパスです。に比べてpubspec.yamlファイル。これらのファイルには、フォント内のグリフのアウトラインが含まれています。アプリを構築するときに、これらのファイルはアプリのアセットバンドルに含まれています。

単一のフォントは、異なるファイルを含む多くの異なるファイルを参照できます。アウトラインのウェイトとスタイル:

のweightプロパティはアウトラインの太さを指定します。ファイルは 100 ～ 900 の 100 の整数倍です。これらの値は、FontWeightで使用できますfontWeightの財産TextStyle物体。たとえば、を使用したい場合は、RobotoMono-Bold上記で定義したフォント、あなたは設定するでしょうfontWeightにFontWeight.w700あなたの中でTextStyle。

を定義することに注意してください。weightプロパティはそうではありませんフォントの実際のウェイトをオーバーライドします。あなたにはできないでしょうアクセスRobotoMono-BoldとFontWeight.w100たとえそれがweight100に設定されました。
のstyleプロパティは、ファイル内のアウトラインがitalicまたnormal。これらの値は、FontStyleで使用できますfontStyleの財産TextStyle物体。たとえば、を使用したい場合は、Raleway-Italic上記で定義したフォント、あなたは設定するでしょうfontStyleにFontStyle.italicあなたの中でTextStyle。

を定義することに注意してください。styleプロパティはそうではありませんフォントの実際のスタイルをオーバーライドします。あなたにはできないでしょうアクセスRaleway-ItalicとFontStyle.normalたとえそれがstyle通常に設定されました。

3. フォントをデフォルトとして設定する

テキストにフォントを適用する方法には 2 つのオプションがあります: デフォルトのフォントとしてまたは特定のウィジェット内のみ。

フォントをデフォルトとして使用するには、fontFamily財産アプリの一部としてtheme。提供される価値は、fontFamilyと一致する必要がありますfamilyで宣言された名前pubspec.yaml。

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

テーマの詳細については、を参照してくださいテーマを使用して色とフォントスタイルを共有するレシピ。

特定のウィジェットにフォントを適用したい場合は、などTextウィジェット、を提供するTextStyleウィジェットに。

この例では、RobotoMono フォントを単一のフォントに適用します。Textウィジェット。もう一度、fontFamilyと一致する必要がありますfamilyで宣言された名前pubspec.yaml。

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

テキストスタイル

もしTextStyleオブジェクトは重みを指定しますまたは正確なフォントファイルが存在しないスタイル、エンジンはより汎用的なファイルの 1 つを使用しますフォントの輪郭を外挿しようとしますご要望の重量とスタイルに合わせて。

完全な例

フォント

Raleway フォントと RobotoMono フォントは次からダウンロードされました。Google フォント。

`pubspec.yaml`

name: custom_fonts
description: An example of how to use custom fonts with Flutter

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

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
  uses-material-design: true

`main.dart`

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: const Text('Custom Fonts')),
      body: const Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

Custom Fonts Demo