Two Simple Ways to Use Google Fonts In Your Flutter App

In Flutter, fonts play a pivotal role in shaping the visual identity and design aesthetics of a mobile application. The default font on Android is Roboto and on iOS it is .SF UI Display or .SF UI Text .

So what to do if I want to use Google Fonts in my Flutter application? This article will show you to use the google_fonts package in your Flutter application to access fonts from fonts.google.com

Photo by Jon Tyson on Unsplash

You can add the google_fonts package by either running this command in your terminal:

flutter pub add google_fonts

Or adding this line in your package’s pubspec.yaml

dependencies:
  google_fonts: ^6.1.0

Run flutter pub get in your terminal if your IDE doesn’t do it after you add the above line.

Our app at this point looks like this, as it is still using the Roboto font.

Now in your Dart code, import Google Fonts like:

import 'package:google_fonts/google_fonts.dart';

Now to our first method, this method would be perfect if you only wanted to use your preffered Google Font once. Use the Google Font with an existing TextStyle like:

Our app after adding the code above looks as seen below. Note that only the title uses the Poppins font.

Now imagine you want to use a font through your entire application. in your main.dart file or your theme file, add a TextTheme and add your preferred font as seen below.

Note how all the text is now using the Poppins font.

To learn more about how to use different Google Fonts in your app using TextTheme visit google_fonts