How to Use Google Fonts in Flutter: Simple Guide

To use google_fonts in Flutter, add the google_fonts package to your pubspec.yaml, import it, and apply fonts using GoogleFonts.fontName() in your text widgets. This lets you easily use any Google Font without manual font file setup.

Syntax

First, add the google_fonts package to your Flutter project by including it in pubspec.yaml. Then import it in your Dart file. Use GoogleFonts.fontName() to style text with a Google Font.

• google_fonts: The package name.
• GoogleFonts.fontName(): Replace fontName with the font you want, like Roboto or Lato.
• Use it inside a Text widget's style property.

yaml and dart

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^5.0.0

// In your Dart file
import 'package:google_fonts/google_fonts.dart';

Text(
  'Hello Flutter',
  style: GoogleFonts.roboto(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Output

Text widget displaying 'Hello Flutter' in Roboto font, size 24, bold.

Example

This example shows a simple Flutter app using the google_fonts package to display text with the Lato font.

dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Google Fonts Example')),
        body: Center(
          child: Text(
            'Hello with Lato font!',
            style: GoogleFonts.lato(
              fontSize: 30,
              color: Colors.blueAccent,
            ),
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Google Fonts Example' and centered text 'Hello with Lato font!' in blue, size 30, using Lato font.

Common Pitfalls

• Forgetting to add google_fonts to pubspec.yaml causes build errors.
• Not running flutter pub get after adding the package.
• Using a font name that doesn't exist in Google Fonts leads to runtime errors.
• Not importing package:google_fonts/google_fonts.dart before usage.

dart

/* Wrong: Missing import and package setup */
Text('Hello', style: GoogleFonts.roboto());

/* Right: Add package, import, and use */
// pubspec.yaml includes google_fonts
import 'package:google_fonts/google_fonts.dart';
Text('Hello', style: GoogleFonts.roboto());

Quick Reference

Summary tips for using Google Fonts in Flutter:

• Add google_fonts package in pubspec.yaml.
• Import package:google_fonts/google_fonts.dart.
• Use GoogleFonts.fontName() in Text.style.
• Check font names on Google Fonts website.
• Run flutter pub get after adding dependencies.

Key Takeaways

Add the google_fonts package to pubspec.yaml and run flutter pub get.

Import google_fonts.dart and use GoogleFonts.fontName() to style text.

Always verify the font name matches a Google Font to avoid errors.

Use Google Fonts to easily apply custom fonts without manual asset setup.