How To Use Google Fonts In Your Flutter App

Introduction Link to heading

Google Fonts contains over 1,800 different fonts that are free to use. You’ll find the perfect font for any app in their repository. But how do you get them in your app? The usual way is to download the fonts, add them to your pubspec.yaml, and configure them in your app. But there is an easier way. So here is how to use Google Fonts in your Flutter app!

Install the package Link to heading

Manually installing fonts is not hard, but it’s a bit annoying. The google_fonts package takes care of most of it. Install the package for your app.

Bash

# install with CLI
flutter pub add google_fonts

# install with CLI
flutter pub add google_fonts

YAML

# add manually to pubspec.yaml
name: flutter_test
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
<div></div>
environment:
  sdk: ^3.8.1
  flutter: 3.35.2
<div></div>
dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
<div></div>
  cupertino_icons: ^1.0.8
  google_fonts: ^6.3.1

# add manually to pubspec.yaml
name: flutter_test
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ^3.8.1
  flutter: 3.35.2

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

  cupertino_icons: ^1.0.8
  google_fonts: ^6.3.1

This saves you from having to download and manually add the font files.

Apply the configuration Link to heading

Next, head over to your main.dart (or the file where your MaterialApp instance is created).

Choose the desired font (for example, prompt) and assign the corresponding TextTheme object in your ThemeData constructor. This configures all properties in the TextTheme class to use that font. No matter if you want bodySmall or labelLarge, the font will always be the same!

Dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});
<div></div>
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      theme: ThemeData(
        textTheme: GoogleFonts.promptTextTheme())
    );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      theme: ThemeData(
        textTheme: GoogleFonts.promptTextTheme())
    );
}

And that is it!

All it takes is 1 minute of work. Compare this with the manual process!

Conclusion Link to heading

In this article, you learned how to use Google Fonts in your Flutter app. While you can do everything manually, the google_fonts package offers a simple and fast solution to get the job done. I’d recommend using it whenever possible!

Related articles Link to heading

How To Organize Your Flutter App Assets, Styles, Colors, Images Link to heading

A large app contains many resources in different places. Learn how to organize your Flutter App assets, styles, colors, images. Here are some ideas to give more structure to your projects.

Easy Confetti Animations In Flutter Apps Link to heading

Celebrating user achievements is a great way to boost engagement in your Flutter apps. In this article, we’ll discover how to add simple confetti animations in Flutter apps . But since we are lazy developers, we use a package instead of creating the animation on our own. With the code examples and demo videos, you’ll be ready to blast your users away with confetti!

The Flutter pubspec.yaml In Detail Link to heading

The pubspec.yaml file is the main configuration file for your Flutter app. In this article, we’ll have a look at its contents.