注意:基本的に下記説明の通りにやればフォントは変わるんですが、一つだけ、pubspec.yamlファイルの設定はホットリロードでは反映されないので、試す場合「プログラム停止→再実行」が必要です。

それを知らないと「何回ホットリロードしても全くフォントが変わらない」あるいは「変わったり変わらなかったりする」ということになるので注意してください笑

---

Use a custom font

Although Android and iOS offer high quality system fonts, one of the most common requests from designers is for custom fonts. For example, you might have a custom-built font from a designer, or perhaps you downloaded a font from Google Fonts.

アンドロイドもiOSもハイクオリティなシステムフォントを提供していますが、デザイナーからの最も一般的な要求の一つはカスタムフォントです。例えば、あなたはデザイナーからカスタムビルトのフォントを受け取っているかもしれませんし、あるいはGoogle Fontsからダウンロードしているかもしれません。

 

 Note: Check out the google_fonts package for direct access to over 1,000 open-sourced font families.

1000を超えるオープンソースのフォントファミリーに直接アクセスできるgoogle_fontsパッケージをチェックしてみましょう。

google_fontsパッケージReadmeの訳

 Note: For another approach to using custom fonts, especially if you want to re-use one font over multiple projects, see Export fonts from a package.

カスタムフォントを扱う別のアプローチとして、特にあなたが複数のプロジェクトで一つのフォントを再利用したい場合は、Export fonts from a packageをご覧ください。

 

Flutter works with custom fonts and you can apply a custom font across an entire app or to individual widgets. This recipe creates an app that uses custom fonts with the following steps:

Flutterではカスタムフォントを扱うことが可能です。アプリ全体にカスタムフォントを適用することもできますし、個別のウィジェットに適用することも可能です。このレシピでは以下の手順でカスタムフォントを使うアプリを作っていきます。

1. Import the font files.
2. Declare the font in the pubspec.
3. Set a font as the default.
4. Use a font in a specific widget.

1.フォントファイルをインポートします。

2.pubspec.yamlファイルでフォントを宣言します。

3.フォントをデフォルトとしてセットします。

4.特定のウィジェットでフォントを使用します。

---

1. Import the font files

To work with a font, import the font files into the project. It’s common practice to put font files in a fonts or assets folder at the root of a Flutter project.

フォントを使うには、フォントファイルをプロジェクトにインポートします。Flutterプロジェクトのルート(プロジェクト直下)にfonts、あるいはassetsフォルダーを用意してその中にフォントファイルを配置するのが一般的なやり方です。

 

For example, to import the Raleway and Roboto Mono font files into a project, the folder structure might look like this:

例えば、RalewayとRoboto Monoフォントファイルをプロジェクトにインポートした場合のフォルダ構成は以下のようになります。

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

Supported font formats

Flutter supports the following font formats:

Flutterでは以下のフォントフォーマットを採用しています。

• .ttf
• .otf

Flutter does not support .woff and .woff2 fonts for all platforms.

Flutterでは全てのプラットフォームの.woffと.woff2フォントはサポートしていません。

---

2. Declare the font in the pubspec

Once you’ve identified a font, tell Flutter where to find it. You can do this by including a font definition in the pubspec.yaml file.

フォントを決定したら、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 option definitions

The family determines the name of the font, which you use in the fontFamily property of a TextStyle object.

familyはフォント名を決定します。これはTextStyleオブジェクトのfontFamilyプロパティで使います。

 

The asset is a path to the font file, relative to the pubspec.yaml file. These files contain the outlines for the glyphs in the font. When building the app, these files are included in the app’s asset bundle.

assetは、pubspec.yamlファイルからのフォントファイルへのpathです。これらのファイルには、フォント内のグリフのアウトラインが含まれています。これらのファイルはアプリのアセットバンドルに含まれています。

 

A single font can reference many different files with different outline weights and styles:

1つのフォントで、アウトラインの太さやスタイルが異なるさまざまなファイルを参照できます。

 

• The weight property specifies the weight of the outlines in the file as an integer multiple of 100, between 100 and 900. These values correspond to the FontWeight and can be used in the fontWeight property of a TextStyle object.

weightプロパティは、ファイル内のアウトラインの重みを100の整数倍（100〜900）として指定します。これらの値はFontWeightに対応し、TextStyleオブジェクトのfontWeightプロパティで使用できます。

 

• The style property specifies whether the outlines in the file are italic or normal. These values correspond to the FontStyle and can be used in the fontStyle property of a TextStyle object.

styleプロパティは、ファイル内のアウトラインがitalicかnormalかを指定します。 これらの値はFontStyleに対応しており、TextStyleオブジェクトのfontStyleプロパティで使用できます。

---

3. Set a font as the default

You have two options for how to apply fonts to text: as the default font or only within specific widgets.

フォントをテキストに適用する方法には、

デフォルトのフォントとして指定するか、

または特定のウィジェット内でのみ使用するか、

の2つのオプションがあります。

 

To use a font as the default, set the fontFamily property as part of the app’s theme. The value provided to fontFamily must match the family name declared in the pubspec.yaml.

デフォルトの設定としてフォントを使うときは、アプリ(MaterialApp)のthemeとして、つまりThemeDataのfontFamilyプロパティにセットします。fontFamilyにセットする値は、pubspec.yamlファイルで宣言されたfamily名と一致する必要があります。

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

For more information on themes, see the Using Themes to share colors and font styles recipe.

themeに関しての情報はUsing Themes to share colors and font styles をご覧ください。

---

4. Use the font in a specific widget

If you want to apply the font to a specific widget, such as a Text widget, provide a TextStyle to the widget.

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

 

In this example, apply the RobotoMono font to a single Text widget. Once again, the fontFamily must match the family name declared in the pubspec.yaml.

下記のサンプルはRobotoMonoフォントを一つのTextウィジェットに適用しています。ここでも、fontFamilyは、pubspec.yamlで宣言したfamily名と一致している必要があります。

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

TextStyle

If a TextStyle object specifies a weight or style for which there is no exact font file, the engine uses one of the more generic files for the font and attempts to extrapolate outlines for the requested weight and style.

TextStyleオブジェクトが、正確なフォントファイルがないウェイトまたはスタイルを指定している場合、エンジンはフォントに一般的なファイルの1つを使用し、要求されたウェイトとスタイルのアウトラインを推定しようとします。

---

Complete example

Fonts

The Raleway and RobotoMono fonts were downloaded from Google Fonts.

RalewayとRobotoMonoフォントはGoogle Fontsでダウンロードしましょう。

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(MyApp());

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

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

https://flutter.dev/docs/cookbook/design/fonts