MENU
現役エンジニアが教えない、挫折と苦悩のアプリ開発
  1. ホーム
  2. Flutter
  3. google_fonts

google_fonts

Flutter Flutter解説

google_fonts – 美しいフォントを簡単に!
google_fonts は、Google Fontsの1,500種類以上のフォントを簡単に使えるパッケージです!
比喩で言うと: 世界中のフォント図書館から、好きなフォントを借りられるようなもの。しかも無料! 📚✨

🤔 何ができるの?
できること:
✅ 1,500+種類のフォント – Google Fonts全部使える!
✅ 簡単に適用 – たった1行でフォント変更
✅ 日本語フォント – Noto Sans JP など
✅ 自動ダウンロード – 必要なときに自動取得
✅ カスタマイズ – 太さ、スタイルを自由に

使う場面の例:

用途：

  • タイトル・・・Roboto, Montserrat
  • 本文・・・Open Sans, Lato
  • 日本語・・・Noto Sans JP, M PLUS Rounded 1c
  • 手書き風・・・Caveat, Pacifico
  • コード・・・Roboto Mono, Source Code Pro
  • おしゃれ・・・Dancing Script, Satisfy

インストール方法

❶ pubspec.yaml に追加

dependencies:
  flutter:
    sdk: flutter
  
  google_fonts: ^6.1.0

❷ パッケージを取得

flutter pub get

❸ import する

import 'package:google_fonts/google_fonts.dart';

基本的な使い方

パターン
Text Widget で直接使う
Text(
  'Hello World',
  style: GoogleFonts.roboto(),  // Roboto フォント
)

超簡単! これだけでフォントが変わります 😊

パターン
TextStyle を取得
Text(
  'Hello World',
  style: GoogleFonts.roboto(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

TextStyle の全プロパティが使えます!

パターン
Theme で全体に適用

アプリ全体のフォントが一括変更! 便利！

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.robotoTextTheme(),  // アプリ全体に適用
  ),
  home: HomePage(),
)

実践例

1: 基本的なフォント適用

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class FontDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Fonts デモ')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Roboto
            Text(
              'Roboto フォント',
              style: GoogleFonts.roboto(fontSize: 24),
            ),
            SizedBox(height: 16),
            
            // Lato
            Text(
              'Lato フォント',
              style: GoogleFonts.lato(fontSize: 24),
            ),
            SizedBox(height: 16),
            
            // Montserrat
            Text(
              'Montserrat フォント',
              style: GoogleFonts.montserrat(fontSize: 24),
            ),
            SizedBox(height: 16),
            
            // Pacifico (手書き風)
            Text(
              'Pacifico フォント',
              style: GoogleFonts.pacifico(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

2: フォントの太さとスタイル

class FontWeightDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 通常
        Text(
          'Regular (400)',
          style: GoogleFonts.roboto(
            fontSize: 20,
            fontWeight: FontWeight.w400,
          ),
        ),
        
        // 太字
        Text(
          'Bold (700)',
          style: GoogleFonts.roboto(
            fontSize: 20,
            fontWeight: FontWeight.w700,
          ),
        ),
        
        // 極太
        Text(
          'Black (900)',
          style: GoogleFonts.roboto(
            fontSize: 20,
            fontWeight: FontWeight.w900,
          ),
        ),
        
        // イタリック
        Text(
          'Italic',
          style: GoogleFonts.roboto(
            fontSize: 20,
            fontStyle: FontStyle.italic,
          ),
        ),
        
        // 色付き
        Text(
          'Colored',
          style: GoogleFonts.roboto(
            fontSize: 20,
            color: Colors.blue,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

3: 日本語フォント

日本語に対応したフォント:

class JapaneseFonts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Noto Sans JP (一番人気!)
        Text(
          'こんにちは、世界！',
          style: GoogleFonts.notoSansJp(fontSize: 24),
        ),
        SizedBox(height: 16),
        
        // M PLUS Rounded 1c (丸ゴシック)
        Text(
          'こんにちは、世界！',
          style: GoogleFonts.mPlusRounded1c(fontSize: 24),
        ),
        SizedBox(height: 16),
        
        // M PLUS 1p
        Text(
          'こんにちは、世界！',
          style: GoogleFonts.mPlus1p(fontSize: 24),
        ),
        SizedBox(height: 16),
        
        // Kosugi Maru (小杉丸)
        Text(
          'こんにちは、世界！',
          style: GoogleFonts.kosugiMaru(fontSize: 24),
        ),
        SizedBox(height: 16),
        
        // Sawarabi Gothic
        Text(
          'こんにちは、世界！',
          style: GoogleFonts.sawarabiGothic(fontSize: 24),
        ),
      ],
    );
  }
}

おすすめ日本語フォント:

  • notoSansJp – 万能、読みやすい ⭐⭐⭐⭐⭐
  • mPlusRounded1c – 柔らかい、可愛い ⭐⭐⭐⭐
  • kosugiMaru – 丸っこい ⭐⭐⭐⭐

4: アプリ全体にフォントを適用

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        // アプリ全体のフォントを Noto Sans JP に
        textTheme: GoogleFonts.notoSansJpTextTheme(
          Theme.of(context).textTheme,
        ),
        
        // AppBar のフォントも変更
        appBarTheme: AppBarTheme(
          titleTextStyle: GoogleFonts.notoSansJp(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      home: HomePage(),
    );
  }
}

これで全部のTextが Noto Sans JP になります! 🎉

5: 部分的にフォントを変える

class MixedFonts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // タイトル: 太字でおしゃれに
        Text(
          'コンサート情報',
          style: GoogleFonts.montserrat(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            letterSpacing: 1.2,
          ),
        ),
        SizedBox(height: 8),
        
        // サブタイトル: 日本語
        Text(
          '2026年春のコンサートスケジュール',
          style: GoogleFonts.notoSansJp(
            fontSize: 16,
            color: Colors.grey[600],
          ),
        ),
        SizedBox(height: 24),
        
        // 本文: 読みやすく
        Text(
          '今年も素晴らしいコンサートをお届けします。'
          'チケットは公式サイトから予約できます。',
          style: GoogleFonts.notoSansJp(
            fontSize: 14,
            height: 1.6,  // 行間
          ),
        ),
      ],
    );
  }
}

人気フォントの紹介

英語フォント トップ10:

フォント特徴用途
Robotoシンプル、読みやすい万能
Open Sansクリーン、モダン本文
Latoエレガントタイトル・本文
Montserrat都会的タイトル
Poppins丸っこいUI
Raleway洗練タイトル
Merriweather上品長文
Roboto Mono等幅コード・数字
Pacifico手書き風アクセント
Dancing Script筆記体おしゃれ

日本語フォント トップ5:

フォント特徴用途
Noto Sans JP読みやすい、万能全般 ⭐⭐⭐⭐⭐
M PLUS Rounded 1c丸ゴシック、可愛いカジュアルなアプリ
M PLUS 1pスッキリビジネスアプリ
Kosugi Maru柔らかい教育系アプリ
Sawarabi Gothicシンプル本文

フォントの探し方

Google Fonts サイトで探す

https://fonts.google.com

好きなフォントを見つける
フォント名をメモ
Flutter で使う!

コード内で使用可能なフォント名

  • Roboto　→　GoogleFonts.roboto()
  • Open Sans　→　GoogleFonts.openSans()
  • Noto Sans JP　→　GoogleFonts.notoSansJp()
  • M PLUS Rounded 1c　→　GoogleFonts.mPlusRounded1c()

フォントのキャッシュ管理

自動ダウンロード:
初めて使うフォントは、自動でダウンロードされます。

// 初回: ダウンロードされる(少し時間がかかる)
Text('Hello', style: GoogleFonts.roboto())

// 2回目以降: キャッシュから読み込み(速い!)
Text('World', style: GoogleFonts.roboto())

事前ダウンロード(推奨!):
アプリ起動時に、使うフォントを先にダウンロード:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // フォントを事前ロード
  await GoogleFonts.pendingFonts([
    GoogleFonts.roboto(),
    GoogleFonts.notoSansJp(),
    GoogleFonts.montserrat(),
  ]);
  
  runApp(MyApp());
}

オフラインでも使えるようにする:
pubspec.yaml でフォントをバンドル:

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Bold.ttf
          weight: 700

⚠️ 注意点とコツ

初回読み込みに時間がかかる

// ❌ 初回は遅い
Text('Hello', style: GoogleFonts.roboto())

// ✅ 事前ロードしておく
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GoogleFonts.pendingFonts([GoogleFonts.roboto()]);
  runApp(MyApp());
}

フォント名を間違えない

// ❌ エラー
GoogleFonts.roboto_mono()  // アンダースコアはダメ

// ✅ 正しい
GoogleFonts.robotoMono()  // キャメルケース

たくさん使いすぎない

// ❌ 統一感がない
Text('Title', style: GoogleFonts.pacifico())
Text('Body', style: GoogleFonts.dancingScript())
Text('Footer', style: GoogleFonts.satisfy())

// ✅ 2-3種類に絞る
Text('Title', style: GoogleFonts.montserrat())  // タイトル用
Text('Body', style: GoogleFonts.notoSansJp())   // 本文用

ルール: アプリ全体で 2-3種類まで にしましょう!

日本語と英語で使い分け

// ✅ 良い組み合わせ
Text(
  'Concert Info',
  style: GoogleFonts.montserrat(fontSize: 24),  // 英語
)
Text(
  'コンサート情報',
  style: GoogleFonts.notoSansJp(fontSize: 24),  // 日本語
)

Theme で統一するのが楽

// ✅ 一箇所で管理
MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.notoSansJpTextTheme(),
  ),
)

// 個別に変更したい部分だけ上書き
Text(
  'Special Title',
  style: GoogleFonts.montserrat(fontSize: 32),
)

フォント選びのコツ

ビジネス・・・Roboto, Lato, Noto Sans JP
カジュアル・・M PLUS Rounded 1c, Poppins
教育・・・・・Open Sans, Kosugi Maru
おしゃれ・・・Montserrat, Raleway
手書き風・・・Pacifico, Caveat
コード表示・・Roboto Mono, Source Code Pro

組み合わせの例:

// パターン1: シンプル & 読みやすい
タイトル: GoogleFonts.roboto()
本文: GoogleFonts.notoSansJp()

// パターン2: おしゃれ & モダン
タイトル: GoogleFonts.montserrat()
本文: GoogleFonts.lato()

// パターン3: 柔らかい & 親しみやすい
タイトル: GoogleFonts.mPlusRounded1c()
本文: GoogleFonts.mPlusRounded1c()  // 統一

// パターン4: 数字が見やすい
タイトル: GoogleFonts.roboto()
数字: GoogleFonts.robotoMono()  // 等幅

実践的なヘルパークラス

再利用しやすいように:

class AppFonts {
  // タイトル用
  static TextStyle title({Color? color}) => GoogleFonts.montserrat(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: color,
  );
  
  // サブタイトル用
  static TextStyle subtitle({Color? color}) => GoogleFonts.notoSansJp(
    fontSize: 18,
    fontWeight: FontWeight.w500,
    color: color,
  );
  
  // 本文用
  static TextStyle body({Color? color}) => GoogleFonts.notoSansJp(
    fontSize: 14,
    height: 1.6,
    color: color,
  );
  
  // キャプション用
  static TextStyle caption({Color? color}) => GoogleFonts.notoSansJp(
    fontSize: 12,
    color: color ?? Colors.grey[600],
  );
  
  // 数字用
  static TextStyle number({Color? color, double? fontSize}) => GoogleFonts.robotoMono(
    fontSize: fontSize ?? 20,
    fontWeight: FontWeight.w500,
    color: color,
  );
}

// 使い方
Text('会社情報', style: AppFonts.title())
Text('2026年春のスケジュール', style: AppFonts.subtitle())
Text('詳細はこちら', style: AppFonts.body())
Text('¥8,000', style: AppFonts.number(color: Colors.green))

一言まとめ:
google_fonts は1,500+種類のフォントを簡単に使えるパッケージ!
GoogleFonts.roboto() で1行適用、Theme で全体適用も可能。
日本語なら notoSansJp か mPlusRounded1c がおすすめ!
フォントは2-3種類に絞ると統一感が出る! ✨

Flutter Flutter解説