How to use Google Fonts in Flutter

The Google fonts give our Flutter App a unique look. Therefore, besides the default font, we can pick up any Google font that is available for free.

We can pick from any font of 1359 font families. We can download the fonts first. And, after that, we can keep them in the fonts family and mention the path in the “pubspec.yaml” file.

It is just like we have used our images in any Flutter App.

However, there is a better way to use the same Google fonts. An easier way.

Here, in this section we will learn that trick. In addition, we will use various Google fonts to create a Business Card Flutter App.

We have already learned how to use Column, Image and Card Widgets. Therefore, that knowledge will also help us to build this Business Card Flutter App.

How do you add Google fonts to flutter?

Before adding the Google fonts let us take a look at the Business Card App that we are going to build.

Let us run the App in Google Chrome Browser and see the output.

After that, we will run the same Flutter App in the Android Virtual Device.

It is a good practice that we should run the same Flutter App in different devices. It ensures that our Flutter App works fine across all the devices.

As we can see the output on the screen, we understand that we need a Column Widget. In addition, we have to place the Column Widget under the Center Widget.

As children of the Column widget, we need an Image, a few Text Widgets and a couple of Card Widgets.

In our previous sections we have learned how to use those Material Widgets.

But there are two things that need to be understood. These two factors have enhanced the user experience and given a unique look to the Business Card Flutter App.

Firstly, we have used Google fonts to describe the name and the job title.

Secondly, we have given the image a rounded shape.

What fonts does flutter come with?

As the default font on Android Flutter uses the “Roboto”. On iOS the default font is the “San Francisco UI Display”, or the “San Francisco UI Text”.

To add the custom font we have used a package called google_fonts.

In our pubspec.yaml file, we have added the dependencies.

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^2.3.1

Now we can import it in any file where we need it.

It is probably the easiest way to use any Google fonts.

Still, if you want to go the other way. No problem. We must welcome the difference. Moreover, if you want to use the custom fonts as your assets and keep them locally, that also works fine.

# 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: Schuyler
      fonts:
        - asset: fonts/Schuyler.ttf
    #       - asset: fonts/Schyler-Italic.ttf
    #         style: italic
    - family: Trajan Pro
      fonts:
        - asset: fonts/Trajan Pro Regular.ttf
          #       - asset: fonts/TrajanPro_Bold.ttf
          weight: 700

However, we have depended on different custom Google fonts. Therefore, we have imported it.

And after that, we have used them in the name and job title section.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
...
Container(
              padding: const EdgeInsets.all(5.0),
              child: Text(
                'Lion King',
                style: GoogleFonts.laila(
                  textStyle: Theme.of(context).textTheme.headline6,
                  fontSize: 50,
                  fontWeight: FontWeight.w700,
                  color: Colors.orange.shade900,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(5.0),
              child: Text(
                'Flutter Developer',
                style: GoogleFonts.lato(
                  fontSize: 30,
                  fontWeight: FontWeight.w900,
                  color: Colors.orange.shade500,
                ),
              ),
            ),

We have used two Google fonts – “laila” and “lato”.

The “style” property of the Text Widget expects the Google Fonts where we can set the font size, color and many more.

Besides, to give the image a rounded shape, we have used the CircleAvatar class.

The CircleAvatar Widget has a property called backgroundImage that expects another Widget AssetImage.

 const CircleAvatar(
              backgroundImage: AssetImage(
                'images/lion-king.jpg',
              ),
              radius: 75.0,
            ),

We can control the size of the rounded shape by the “radius” property.

The Complete Code snippet

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  static const title = 'The Lion King Business Card';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: title,
      home: AppHomePage(
        title: title,
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  const AppHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.amber[900],
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CircleAvatar(
              backgroundImage: AssetImage(
                'images/lion-king.jpg',
              ),
              radius: 75.0,
            ),
            Container(
              padding: const EdgeInsets.all(5.0),
              child: Text(
                'Lion King',
                style: GoogleFonts.laila(
                  textStyle: Theme.of(context).textTheme.headline6,
                  fontSize: 50,
                  fontWeight: FontWeight.w700,
                  color: Colors.orange.shade900,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(5.0),
              child: Text(
                'Flutter Developer',
                style: GoogleFonts.lato(
                  fontSize: 30,
                  fontWeight: FontWeight.w900,
                  color: Colors.orange.shade500,
                ),
              ),
            ),
            SizedBox(
              height: 16.0,
              width: 60.0,
              child: Divider(
                color: Colors.orange.shade300,
                thickness: 2.0,
              ),
            ),
            Card(
              margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
              color: Colors.orange.shade100,
              child: const ListTile(
                title: Text('100 123 456'),
                trailing: Icon(Icons.phone_android),
              ),
            ),
            Card(
              margin: const EdgeInsets.fromLTRB(40.0, 5.0, 40.0, 5.0),
              color: Colors.orange.shade100,
              child: const ListTile(
                title: Text('to@iamlion.com'),
                trailing: Icon(Icons.email_outlined),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

You can also download the full code from this GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter