How to use Google Fonts in Flutter

Google Fonts offers a wide range of different fonts that you can use in your Flutter projects. In this post, we will explore how to use Google Fonts in a Flutter application. Google Fonts can greatly enhance the professionalism of your application and make your application stand out.

Installing the package

In order to use Google Fonts, we need to install Flutter's google_fonts package. You can do this by executing flutter pub add google_fonts in your terminal.

After executing the command, make sure that the package has been added to your dependencies inside your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^5.1.0

Now that we have the package installed we can go straight into the implementation.

Implementing Google Fonts

There are two ways to implement Google Fonts in Flutter. The GoogleFonts class provides static constructors for each font available in Google Fonts. Those constructors either return a TextTheme or TextStyle. To distinguish between them all the TextTheme constructors are suffixed with TextTheme.

1. Using TextTheme

The first approach involves setting the textTheme property of the MaterialsApp's ThemeData property to a Google Font using the GoogleFonts class. See the code below:

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: 'Google Fonts Demo',
      theme: ThemeData(
        textTheme: GoogleFonts.robotoMonoTextTheme(),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Fonts Demo'),
        ),
        body: Center(
          child: Text(
            'I am using Google Fonts',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

In this code snippet, we use the GoogleFonts.robotoMonoTextTheme() as the default text theme, applying the "Roboto Mono" font to all text elements in the application. The application itself will display a Text widget inside the AppBar and a Text widget in the center of the Scaffold widget.

Now when we run the application you will see that both Text widgets are using the "Roboto Mono" Google Font.

2. Using Text widget's style

Alternatively, we can directly apply a Google Font to a Text widget's style property. Here is an example:

child: Text(
  'I am using Google Fonts',
  style: GoogleFonts.aBeeZee(
    fontSize: 24,
  ),
),

In this code snippet, we use the GoogleFonts class with a TextStyle instead of a TextTheme. Because it is a TextStyle, we can add additional styles like for example the fontSize to our text within the constructor.

In the GIF below, you will see that we combined different Google Fonts, because the default TextTheme is still applied to any text elements that do not have a specific Google Font assigned to them.

Conclusion

In this post, we explored how to use Google Fonts in a Flutter application. By using the google_fonts package, you can easily implement beautiful fonts into your Flutter projects. You now also know how to apply different Google Fonts within your application.

Tags

• Flutter
• Dart