Using a Custom Font in Flutter

In this tutorial, we’re going to learn various methods to use custom fonts in Flutter.

I’ll be covering two methods: one is a manual method where you load a .ttf file, and another is a method that uses the Google Fonts package.

Method 1: Manual

Step 1: Choose a font

Let’s head over to fonts.google.com and choose a font to download. I like the Oswald font, I will search for it on the Google Fonts page. Once the font is found, click on it so that it opens a list of styles as is shown in the image below.

oswald-google-fonts

To download the font, I will select the “Select styles” tab first and then I will click on the “Download family” button which is in the top right corner. Google font will be downloaded as a zip archive.

You need to unzip it before moving ahead.

Step 2: Create a new Flutter Project

Create a new Flutter project using an IDE or a command line.

flutter create custom_font_app

This will create a new project in your current directory. You can open the project in any IDE of your choice!

After you have done that, let’s open the project in explorer.

We’ll create a folder named assets here and transfer the unzipped folder which contains our fonts.

This is how it will look like. I have all of my .ttf files inside the assets/Oswald folder.

Now, back to the IDE!

In your IDE, or using any text editor, open the pubspec.yaml file.

If you don’t clear out the comments and head over to line 58, you’ll see an example of how to declare fonts in pubspec.yaml file.

# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
#   - family: Schyler
#     fonts:
#       - asset: fonts/Schyler-Regular.ttf
#       - asset: fonts/Schyler-Italic.ttf
#         style: italic
#   - family: Trajan Pro
#     fonts:
#       - asset: fonts/TrajanPro.ttf
#       - asset: fonts/TrajanPro_Bold.ttf
#         weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages

Uncomment the example starting with fonts.

Now let’s start changing it.

  • family: Oswald
  • weights: refer here

Have a look at the image below. The value of “weight” is above each text line.

oswald weights

Once you provide font information, your pubspec.yaml will look like this:

fonts:
    - family: Oswald
      fonts:
        - asset: assets/Oswald/Oswald-Regular.ttf
          weight: 400
        - asset: assets/Oswald/Oswald-Bold.ttf
          weight: 700
        - asset: assets/Oswald/Oswald-ExtraLight.ttf
          weight: 200
        - asset: assets/Oswald/Oswald-Light.ttf
          weight: 300
        - asset: assets/Oswald/Oswald-Medium.ttf
          weight: 600
        - asset: assets/Oswald/Oswald-SemiBold.ttf
          weight: 500

Save changes you have made to the pubspec.yaml file and run the following Flutter command in the terminal window.

flutter pub get

Next, open your app code and update the theme property of the MaterialApp widget as is shown in the code example below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(      
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, 
        fontFamily: 'Oswald',
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

These steps should be enough to have custom fonts on your Flutter App. Feel like this was too much of a hassle? Worry not! On to method 2.

Alternative Approach: Using google_fonts package

Another way to add a custom font to your Flutter app is to use the google_fonts package.  

The google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) from fonts.google.com in your Flutter app.

You can learn more about Google Fonts package if you visit the following page: https://pub.dev/packages/google_fonts.

google-fonts-pub.dev

Add Google Fonts to pubspec.yaml

The first step is to update the pubspec.yaml file as shown below.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  google_fonts:

Usage

Using Google fonts is very simple. To use it throughout the app, you just need to change the textTheme in ThemeData inside your MaterialApp widget.

To use Lato:

MaterialApp( 
  theme: ThemeData( 
    textTheme: GoogleFonts.latoTextTheme( 
      Theme.of(context).textTheme, 
      ), 
   ), 
);

If you want to use it only at a particular place:

Text( 
  'This is Google Fonts', 
  style: GoogleFonts.lato(), 
),

Drawbacks

Google fonts try to get your fonts from HTTP which could be slow. Bundling it with assets is a better and faster option. Fret not, Google fonts can automatically detect any font you might have declared in the assets section in pubspec.yaml file.

Because always loading the font from HTTP is not the best approach, it is recommended to download the font and to add it to an assets folder. You can do it right after you are confident about the font style you will be using and before releasing your mobile app to the app store.

To make Google Fonts read the font style from an assets folder rather than downloading it every time, please follow the below steps.

Loading Fonts from Assets Directory with Google Fonts

  1. Download the font files from https://fonts.google.com. You only need to download the weights and styles you are using for any given family.
  2. Move those fonts to a top-level app directory (e.g. google_fonts).

  3. Ensure that you have listed the folder (e.g. google_fonts/) in your pubspec.yaml under assets.

And that’s it!

Google fonts package will automatically search for these fonts and apply it. Since you’re bundling the fonts with the App your app will load and run faster!

Note: Now you don’t need to declare the fonts in the fonts section of pubspec.yaml, as we saw in the first method.

Happy mobile app development with Flutter 🙂!


Leave a Reply

Your email address will not be published. Required fields are marked *

Free Video Lessons

Enter your email and stay on top of things,

Subscribe!