How to Use Google Web Fonts on Flutter App

In this example, we are going to show you the easy way to use Google Web Fonts on the Flutter app fully on offline mode. Google Fonts has a huge collection of Fonts free of cost. See the examples below to use them on Flutter App.

First of all, create a folder with the name 'google_fonts' inside your project folder, this folder will be used to store Google fonts files.

Now, edit your pubspec.yaml file and index the folder below asset attribute like below:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - google_fonts/

Go to Google Fonts website and find out the best font for you and download them. For example, we are going to use Lato and Oswald font in this example. Click on the "Download Family" button to download all the Font Family. Font Family means, the collection of styles of the individual family such as bold, italic, bold-italic, etc.

Now, extract the download file and move the Font files to "google_fonts" folder, your folder may look like below:

Now, add google_fonts Flutter package in your project dependency by adding the following lines on pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^2.1.0

Import package in your script:

import 'package:google_fonts/google_fonts.dart';

//default 
Text('Almost before we knew it, we had left the ground.',
style:GoogleFonts.openSans()), //Open Sans font

By loading fonts dynamically:

//use google fonts by loading dyamically
Text('Almost before we knew it, we had left the ground.',
style:GoogleFonts.getFont("Oswald")), 
//be careful, that prefix name of font on 
// google_fonts/ folder should match, its case sensitive

//google font with style
Text('Almost before we knew it, we had left the ground.',
style:GoogleFonts.openSans(
  fontSize: 30,
  fontWeight: FontWeight.bold
)), //Open Sans font

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

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( 
      theme: ThemeData(
        textTheme: GoogleFonts.latoTextTheme(
          Theme.of(context).textTheme,
        ),
      ),
      home: Home()
    );
  }
}

class Home extends  StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Google Web Fonts on Flutter"),
            backgroundColor: Colors.redAccent,
         ),
          body: Container(
             padding: EdgeInsets.all(20),
             child: Column( 
               children:[

                    //default 
                    Text('Almost before we knew it, we had left the ground.',
                    style:GoogleFonts.openSans()), //Open Sans font

                    //default 
                    Text('Almost before we knew it, we had left the ground.',
                    style:GoogleFonts.oswald()), //Oswald font

                    //use google fonts by loading dyamically
                    Text('Almost before we knew it, we had left the ground.',
                    style:GoogleFonts.getFont("Oswald")), 
                    //be careful, that prefix name of font on 
                    // google_fonts/ folder should match, its case sensitive

                    //google font with style
                    Text('Almost before we knew it, we had left the ground.',
                    style:GoogleFonts.openSans(
                      fontSize: 30,
                      fontWeight: FontWeight.bold
                    )), //Open Sans font
                    
                ]
             ),
          )
      );
  }
}