Flutter Google Fonts Package Library
Flutter Google Fonts Package Library

Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we  Learn How to use google Fonts package library and also implement how can we add fonts in Flutter Applications.

Firstly Let’s make use of google fonts in our Flutter project

flutter text animation - animated t...
flutter text animation - animated text kit package

Brief about Flutter Google Fonts package?

The use Google_Fonts package in flutter application development allows use to make use of 977 free google fonts with their variants from fonts.google.com straight into your flutter app.

NOTE : as said in official flutter dev site that this package is in Beta testing, So the API is subjected to change anytime.

Official Site

With the use of Google Fonts package, Their is not need to store .ttf or .otf files in your flutter project assets folder and map in pubspec.yaml file.

Instead, this fonts package files is been fetched once via http at the runtime, and is been stored into cached memory of the app’s file system.

Let’s begin adding this library in flutter project.

Step 1 : Create a Flutter Project

Off-course you need to create a new flutter project or just work on your existing Flutter projects

File > New > New Flutter Project

Step 2 : Add Flutter Google Fonts package Dependencies

Once you Flutter Project is ready now to need to add the required dependencies in pubspec.yaml File

dependencies:
  google_fonts: ^0.3.9 // add this line

adding google font in flutter

Then once you have add the dependencies code just click on Packages get.

Step 3 : Import the fonts Packages

Once you add the dependencies now you can user the Fonts package wherever required in your flutter project

just you need to import the fonts package dart classes.

import 'package:google_fonts/google_fonts.dart';

Step 4 : Different ways to use Google Fonts in Flutter

with Default  Fonts TextStyle

Text(
              "Welcome to Proto Coders Point",
              style: GoogleFonts.pacifico(),
            )

flutter google font pacifico example

Text(
             "Welcome to Proto Coders Point",
             style: GoogleFonts.lacquer(),
           )

flutter google font package lacquer

using existing TextStyle

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

Font styling in flutter

Making use of  fontSizefontWeight, or fontStyle:

In the below snippet code i have gave styling to the text using fontSize : 25 , fontweight : 700 , fontStyle : italic.

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

flutter google fonts size, weight, style

And there you go this is how we can use Google Font in flutter app.

Part 2 : How to use Custom Fonts in Flutter  Text Widget?

Here are the steps you need to follow to use of add Custom Fonts in Flutter Project

Steps to add custom font in flutter

Step 1 : Download and add/ import font file in flutter project

To download free google fonts go to https://fonts.google.com/

Then Select the Font that you  want to use in your project and download and extract the zip file.

How to download fonts from google fonts

Extract the Zip file of Font

google fonts downloaded file image

Now, Come back to Flutter project and Create a folder name ” fonts ”  and  copy the .ttf font file under that project.

Here is my project structure after creating fonts directory

creating a fonts directory in flutter project

I am making use of Vibur-Regular.ttf font to demonstrate.

Step 2 : Declare the font in Pubspec.yaml

fonts:
  - family: Vibur_fonts  #this family name will be used in textStyle
    fonts:
      - asset: fonts/Vibur-Regular.ttf

Note : In pubspec.yaml file the indentation is very much required, Even a single space might get you an error.

Step 4 : Use it is Text Widget

Now you can use the custom fonts in Text widget in your flutter application.

Text(
              "Text with Vibur Font Style",
              style: TextStyle(fontFamily: 'Vibur_fonts', fontSize: 30),
            ),

To apply the fontFamily use the family name we have declared in pubspec.yaml.

Flutter Custom font exmple

Complete Source code to Apply Google Fonts and Custom Fonts

just Copy paste the below code in main.dart file

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Google Fonts in Flutter App ",
          style: GoogleFonts.lato(),
        ),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              "Below is Example of Google Fonts Packages",
              style: TextStyle(color: Colors.indigo, fontSize: 20),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Default TextStyle",
              style: TextStyle(decoration: TextDecoration.underline),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Welcome to Proto Coders Point",
              style: GoogleFonts.lacquer(),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text("Using existing TextStyle",
                style: TextStyle(decoration: TextDecoration.underline)),
            SizedBox(
              height: 10.0,
            ),
            Text(
              'This is Google Fonts lato',
              style: GoogleFonts.lato(
                textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Using properties size,weight,Style",
              style: TextStyle(decoration: TextDecoration.underline),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              'This is Google Fonts',
              style: GoogleFonts.tradeWinds(
                textStyle: Theme.of(context).textTheme.display1,
                fontSize: 25,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.italic,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              "Below is Example of Custom Fonts",
              style: TextStyle(color: Colors.indigo, fontSize: 25),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Text with Vibur Font Style",
              style: TextStyle(fontFamily: 'Vibur_fonts', fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }
}