Google Fonts in Flutter- The Easy Way to Change Font in 2022

Changing the Font in Flutter helps you make your app unique and can speak your brand identity. For example, if you are developing an app related to technical stuff then displaying the font that resembles the most with technology is a good way to engage users. In this tutorial, we’ll learn how to use the Google fonts in Flutter using google_fonts package.

Benefit: Google Fonts package fetches and uses fonts from the internet. You don’t need to store the fonts in your app assets which can reduce some app size.

Here’s what we’ll cover:

• Steps to Add Google Fonts in Flutter
  1. Adding Dependency
  2. Adding Package Import Statement
  3. Using Google Font in Text Widget
• Changing Google Font at App Level
• Overriding TextStyle with Google Font
• Using Fonts when Offline
• Changing Fonts Dynamically

Steps to Add Google Fonts in Flutter

To add the Google Fonts in Flutter, first of all, you need to add the dependency then import the package statement and then you can use the Google fonts in your Text widget.

Step 1: Adding Dependency

To add the dependency:

• Visit the https://pub.dev/packages/google_fonts
• Copy the dependency name and its version.
• Open the pubspec.yaml file and paste it inside the dependencies: section.
• Hit the Pub get or run the flutter pub get in the terminal.

Step 2: Adding Package Import Statement

Package Import Statement is usually a path where the code for Google Font is residing.

To add the package import statement:

• Visit the https://pub.dev/packages/google_fonts
• Select the installing tab.
• Under the Import it section, copy the import statement by clicking on the Copy icon.
• Paste it at the top of your dart file.

Step 3: Using Google Font in Text Widget

Now you can simply use the new font in your Text widget like the following:

Text(
  'Signature',
  style: GoogleFonts.sacramento(),
),

If you have downloaded fonts, you can use them in your app by following the instruction here.

Changing Google Font at App Level

 You may probably want to change the font for the whole app. You can do so by defining the Google Font at the app level.

To apply the Google Font at the App level:

• Go to your main.dart file.
• Inside the MaterialApp, find the ThemeData widget.
• Add the textTheme property and assign the GoogleFonts.
• Stop and re-run your app.

Code Example:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: GoogleFonts.sacramentoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
  home: GoogleFontDemo(),
);

Output:

Overriding TextStyle with Google Font

If you see carefully, the Google Fonts are added to the Style property of the Text widget. What if you wanted to change the size, color, or do any other customization to the Text widget? How would you do that?

To add the TextStyle with Google Font, simply write the style attribute of the Text widget inside the Google Font.

Code Example:

Text(
  'Signature',
  style: GoogleFonts.sacramento(
      fontSize: 48,
      fontWeight: FontWeight.w700,
      fontStyle: FontStyle.italic,
      color: Colors.greenAccent),
)

Output:

Using Fonts when Offline

If you ever encounter a situation where the Google Fonts are not loading correctly or you are building a fully offline app, you might consider storing the fonts in your app. So when the internet is not available Google Font will pick up the fonts from your app.

To use the Google Fonts in offline mode:

• Visit the https://fonts.google.com/ and download the required fonts.
• At the root directory, create a directory called google_fonts.
• Copy-Paste [font].ttf file into the google_fonts folder.
• Open the pubspec.yaml file, Under the assets: section add the -google_fonts/

NOTE: Make sure you don’t change the name of the font file.

Changing Fonts Dynamically

You may want to change the font of the app based on user preference. To change fonts dynamically:

• Instead of writing GoogleFonts.sacramento() just write the GoogleFonts.getFont('Sacramento').

The font name inside the getFont(‘font’) can come from any source of your choice and it will display the right font.

Note: Make sure to write the first letter in capital. 🙂

Conclusion

In this tutorial, we learned how to add the Google Fonts in Flutter using the using google_fonts package with practical examples. We learned how to change the font at the app level as well as override the TextStyle. We also explored how to use the font in offline mode and change them dynamically.

Would you like to check other interesting Flutter tutorials?