Blog

Using custom Fonts is a great way to achieve readability and modernity of your app. Lucklily for us, this is even easier in Flutter since their is an official package that allows us use custom fonts in our app.

In this tutorial we want to explore how to use this package and then look at some examples.

google_fonts

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

So how does this package work.Well as said above it allows you to use the many variants of Google fonts in your app. It is capable of fetching these fonts from online, thus you don't need to statically add these fonts in your Assets folder. This reduces your app bundle size.

When the fonts are downloaded, they are automatically cached in your app's file system so you don't need to download them everytime. Thus they will be usable even while completely offline.

However, yes you can include your fonts in your assets folder. If that is the case then this package will prioritize them over downloading from the network. However if they are not found it will attempt to download them.

Let's see how to use this package in your flutter app.

Step 1: Install it

In your pubspec.yam add the package as follows:

dependencies:
  google_fonts: ^2.1.0

Then flutter pub get to fetch them.

Step 2: Write Code

First you import the google fonts package as follows:

import 'package:google_fonts/google_fonts.dart';

So let's say you want to use the Lato font, to use it with the default TextStyle:

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

And if you want to use a custom TextStyle:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

Or:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.headline4),
),

If you want to override some attributes of this style;

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.headline4,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

Full Example

Here is a full example of how to use this package to load custom fonts:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    final TextStyle headline4 = Theme.of(context).textTheme.headline4!;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: GoogleFonts.oswald(textStyle: headline4),
            ),
            Text(
              '$_counter',
              style: GoogleFonts.lato(fontStyle: FontStyle.italic),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Here is what you get when you run the example:

Reference

Below are the download links:

No.	Link
1.	Download code
2.	Read more