Integrating Google Fonts in Your Flutter App

Photo by CHUTTERSNAP on Unsplash

Have you ever received a design from your designer and wondered, “Where did this designer find such unique fonts?” The answer is Google Fonts. With its rich library of fonts, developers use it to maximize user experience. Fortunately, Flutter, a cross-platform framework, allows developers to integrate Google Fonts into their projects easily. In this guide, we will learn how to add Google Fonts to our project with step-by-step instructions for beginners.

Why use Google Fonts?

Google Fonts offers a vast collection of fonts that developers can use to enhance the visual appeal and user experience of their projects.

Setting up your Flutter Project

The primary location for implementing third-party dependencies in your app is the “pubspec.yaml” file. This file manages your project’s dependencies, including third-party packages like Google Fonts.

Adding Google Fonts

There are two methods to add Google Fonts to our project. We will go through them step-by-step.

Method 1:

In your terminal, navigate to your project directory and run the following command:

flutter pub add google_fonts

This automatically adds the google_fonts package to your pubspec.yaml file. You will notice the following code in the file, with the version dependent on the current version:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.2.1

Method 2:

If you added the above code manually to your pubspec.yaml file, run the following command in your terminal:

flutter pub get

Modify your lib/main.dart file to include the font. Here’s an example using the Poppins font:

// Import the necessary Flutter and Google Fonts packages
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

// The main function to run the Flutter app
void main() {
  runApp(const MyApp());
}

// Define a stateless widget for the main app
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Build the MaterialApp widget
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Google Fonts"),
          centerTitle: true, // Center the title in the AppBar
          backgroundColor:
              Colors.grey, // Set the AppBar background color to grey
        ),
        body: Center(
          child: Text(
            "Hello my people", // The text to be displayed
            // Apply Google Fonts to the text
            style: GoogleFonts.poppins(
                fontSize: 32), // Use Poppins font with a font size of 32
          ),
        ),
      ),
    );
  }
}

Output

Using More Fonts

You can explore different fonts on the Google Fonts website. Once you find a font you like, you can use it in your Flutter project by replacing GoogleFonts. with the desired font's method, such as GoogleFonts.roboto or GoogleFonts.montserrat.

Bundling Fonts for Production

For better performance and offline support, you can bundle the font files with your app:

1. Download the Fonts: Go to Google Fonts, download the font files, and place them in your project’s assets/fonts folder.

2. Update pubspec.yaml: List the font files in the assets section of your pubspec.yaml file:

flutter:
  assets:
    - assets/fonts/

Important: No need to list them in the fonts section of pubspec.yaml as long as they retain their Google Fonts API.

Conclusion

Adding Google Fonts to your Flutter app is simple and can greatly enhance its visual appeal. By following the steps in this guide, you can easily integrate custom fonts and make your app stand out. Happy coding!