Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

Step 1: Create "google_fonts" folder inside your Project Folder:

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.

Step 2: Index 'google_fonts' folder in pubspec.yaml file:

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/

Step 3: Download your Font of Choice from 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:

Step 4: Its time for Coding:

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';

How to Use Google Web Fonts on Text Widget:

//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

How to Style Used Google Web Fonts on Text Widget:

//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

How to set Google Web Fonts on Entire App:

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

Full Code Example:

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
                    
                ]
             ),
          )
      );
  }
}

Output Screenshot: 

In this way, you can use Google Web Fonts on Flutter App with fully offline mode.

No any Comments on this Article


Please Wait...