Zenn
😽

【コラム】GoogleFontsをテーマに宣言する

に公開
Flutter
tech

1. フォントファイルのダウンロード

以下サイトからNoto Sans JPをダウンロード
Browse Fonts - Google Fonts
※今回はNoto_Sans_JPをダウンロードします。

2. ローカル環境でZipファイルを解凍

3. ダウンロードしたファイルをプロジェクトに配置

以下ディレクトリに配置

assets/fonts

4. pubspec.yamlにフォントを宣言

  • 追加コード

    flutter:  
  fonts:
    - family: NotoSansJP
      fonts:
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Thin.ttf
          weight: 100
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-ExtraLight.ttf
          weight: 200
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Light.ttf
          weight: 300
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Regular.ttf
          weight: 400
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Medium.ttf
          weight: 500
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Bold.ttf
          weight: 700
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/Noto_Sans_JP/static/NotoSansJP-Black.ttf
          weight: 900

5. flutter crean flutter pub get実行

6. ThemeにfontFamilyを追加

  • 追加コード

    ThemeData(
    // ここを追加！
    // 変数に入る文字列としては、[NotoSansJP]となる。
    // build runnnerで[FontFamily]クラスが生成されるため、それを使用。
    fontFamily: FontFamily.notoSansJP,

    ...省略...
)

Discussion