Google Fonts Flutter

Installation

After learning the basic concept of Google Fonts in Flutter we need to learn how to install them. You need to take care of three different aspects of the entire process. Those three steps are:

1. Adding Dependency
2. Adding Import Package Statement
3. Using Google Fonts in Text Widget

We shall learn about the three steps in detail in the following subsections. The procedure to be followed in order to add and use Google Fonts is outlined in these sections.

Adding Dependency

In order to add a dependency on google fonts in flutter, one needs to run the following command:

With Flutter:

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

Alternatively, your editor might support Flutter pub.get. Check the docs for your editor to learn more regarding adding a dependency on Google fonts in a flutter.

Adding Package Import Statement

When using Google Fonts in Flutter, you need to add a package ‘import’ statement to your code so that the Flutter engine knows where to find the fonts you want to use.

Google Fonts are not included in the default Flutter framework, so you need to add the ‘google_fonts package’ to your ‘pubspec.yaml’ file and then import it in your Dart code using an import statement.

Now in your Dart code, you can use:

Using Google Fonts in Text Widget

Using Google Fonts in the Text Widget of a Flutter application allows developers to enhance the visual appeal of their app's typography. The Google Fonts package provides access to a vast library of open-source fonts that can be used for free in any project. With the GoogleFonts class, developers can easily specify the desired font for a Text Widget using its name or other attributes like font size, weight, and style. This makes it easy to achieve a consistent look and feel across different parts of the app while also providing a visually appealing user interface. Once you have imported the google_fonts package, you can use the GoogleFonts class to specify the font you want to use in your Text Widget. For example, if you want to use the Roboto font, you can use the following code:

You can also specify additional properties for the font, such as the font weight and font size, like this:

Finally, you can use the TextStyle class to apply additional styling to the Text Widget, such as the text color, like this:

Google fonts in flutter henceforth can now be used in text widget the way you want.

Changing Google Font at App Level

If you wish to change the font for your Flutter app, you can define the Google Font at the app level. Here are the steps to use google font in flutter:

1. Open your main.dart file.
2. Within the MaterialApp widget, locate the theme property and create a textTheme property.
3. Assign the desired Google fonts to the textTheme property.
4. Save the changes to your main.dart file.
5. Stop and restart your app for the changes to take effect.

By following these steps, you can ensure that the Google Font you selected will be uniformly applied to all text in your Flutter app.

In the above code, we used google font in the flutter application to display the text in the desired way. The output of the given code is as follows:

Overriding TextStyle with Google Font

If you examine closely, you'll notice that the Google Fonts are incorporated into the style property of the Text widget. But what if you want to customize the size, color, or other attributes of the Text widget? How would you do that?

When using the Google Fonts package in a Flutter app, you can override the TextStyle properties of your Text Widgets by passing in a GoogleFonts object. This allows you to customize your fonts using the same TextStyle properties that you would use with the default Flutter fonts, but with the added flexibility and variety of the Google Fonts library. To use a Google Font with a specific TextStyle, you can simply wrap your Text widget in a GoogleFonts object and set the desired font family, size, weight, style, and any other properties you want to customize. To apply a custom TextStyle to a Text widget that also uses a Google Font, you can simply include the style attribute within the Google Font method call.

This app is displaying a simple "Hello, World!" message in the center of the screen. The message is styled using the Google Fonts package and the "Montserrat" font, with a font size of 24, a red color, and an underline decoration. The app also includes an app bar with the title "My App".

The output of the given code is as follows:

Using Fonts When Offline

In case the Google Fonts in flutter fail to load properly or if you are developing an entirely offline app, you may want to consider storing the fonts within your app. This way, when the internet is not available, the Google Font will retrieve the fonts from your app.

1. Download the font files from Google Fonts website. You can download the font files for a specific font by clicking the "Download family" button on its page.
2. Place the downloaded font files in the fonts directory in your Flutter project. If the fonts directory doesn't exist, create it in the root of your project.
3. In the "pubspec.yaml" file of your Flutter project, add the following lines under the "flutter" section:

4. Replace <font-family-name> with the name of the font family (e.g. "Roboto"), and <font-file-name> with the name of the downloaded font file (e.g. "Roboto-Regular").
5. To use the font in your Flutter app, use the TextStyle widget and set its fontFamily property to the name of the font family:

6. Replace <font-family-name> with the name of the font family that you defined in the "pubspec.yaml" file.

By including the font files in your project, you can use the Google Fonts even when you are offline.

Changing Fonts Dynamically

In Flutter, you can dynamically change the font used in your app by defining the font family and style in the TextStyle property of your Text Widget, you can set the desired font for that text. You can also dynamically change the font by calling setState and updating the font family and style of the text in the onPressed method of your button. This provides a great way to enhance the user experience and add a touch of customization to your app.

If you desire to alter the app's font based on user preference, you can do so dynamically by following these steps:

1. Instead of using the GoogleFonts.sacramento() method, employ the GoogleFonts.getFont('Sacramento') method.
2. The font name placed inside getFont('font') can originate from any source you prefer, and the correct font will be displayed.
3. Remember to capitalize the first letter of the font name. :)
4. By using this approach, you can dynamically alter the app's font to fit the user's preference, allowing for a more personalized experience.

The output of the above code is as follows:

This app is demonstrating the ability to dynamically change the font of text elements using the Google Fonts package.

The app has three elevated buttons, each representing a different font family, and when the user presses one of these buttons, the font of the Text elements on the screen changes to the corresponding font family.

The font family that is currently selected is stored in the _selectedFont variable, and when the user presses a button, the _changeFont() function is called with the name of the selected font family as a parameter.

The setState() method is used to update the state of the widget when the font family is changed, and the Text elements on the screen are updated with the new font using the GoogleFonts.getFont() method.

Example Application

This app uses the google_fonts package to load and use Google fonts in the app. The ThemeData is set with the GoogleFonts text theme, which sets the default font family for the entire app to Lato.

The app includes a DropdownButton widget that allows the user to dynamically change the font used in a Text widget below it. The Text widget uses the GoogleFonts.getFont() method to load the selected font dynamically.

The outputs of the following code is as follows. The four different fonts that are used on the text have been displayed with the help of google font in flutter.