Skip to main content

Flutter Add Google Fonts

Google fonts is one of the best font family library free available for developers over the globe. Google fonts comes with 1557 open source free font families. In flutter we can use Google fonts using google_fonts Pub package. All we have to do is install the package in our flutter app and we are good to go. One more important thing is that Google fonts gives us 2 options to integrate fonts in our flutter app. First is directly integrating font via Internet on Text and other is call local fonts from fonts directly. We will be discussing both of these scenario in our tutorial.

Access all Google Fonts From HERE.

1. Download & Install Google Fonts Package in Flutter project:

1. Open your flutter project Root directory in Terminal and execute below pub command to install the Google fonts package in current flutter app.
flutter pub add google_fonts
Screenshot of Terminal:
Download and Install Google fonts in Flutter project
Screenshot after installing finish:
Flutter command to install google fonts

2. Flutter Add Google Fonts using online Fonts calling function:

1. In this step we are calling Google fonts directly in our flutter app using below syntax.
GoogleFonts.YourFontName(Text Style);
2. Import google_fonts.dart package in your main.dart file.
import 'package:google_fonts/google_fonts.dart';
3. Integrating Online Google fonts on our Text widget.
Column(children: [
      Text(
        'Google Fonts in Flutter App',
        style: GoogleFonts.bowlbyOneSc(fontSize: 40, color: Colors.red),
        textAlign: TextAlign.center,
      ),
      Text(
        'One',
        style: GoogleFonts.comfortaa(
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Two',
        style: GoogleFonts.caveat(
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Three',
        style: GoogleFonts.greatVibes(fontSize: 50, color: Colors.black),
      ),
      Text(
        'Four',
        style: GoogleFonts.juliusSansOne(fontSize: 50, color: Colors.black),
      )
    ])
4. Source code for main.dart when we're calling Google fonts online:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(children: [
      Text(
        'Google Fonts in Flutter App',
        style: GoogleFonts.bowlbyOneSc(fontSize: 40, color: Colors.red),
        textAlign: TextAlign.center,
      ),
      Text(
        'One',
        style: GoogleFonts.comfortaa(
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Two',
        style: GoogleFonts.caveat(
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Three',
        style: GoogleFonts.greatVibes(fontSize: 50, color: Colors.black),
      ),
      Text(
        'Four',
        style: GoogleFonts.juliusSansOne(fontSize: 50, color: Colors.black),
      )
    ])))));
  }
}

3. Integrate Google fonts locally in flutter App:

This method is mainly used when we do not want online dependency in our flutter project. If in any case internet is not available or our app works locally then this option is far better than online fonts calling. Because all the fonts is present in our local directory.
1. Create a folder named as google_fonts in your flutter project.
Creating Google fonts folder in flutter app
2. Download and copy all the fonts in the Google fonts folder.
Copy Google fonts in flutter app folder
3. Define google_fonts folder path in your flutter project's pubspec.yaml file.
assets:
  - google_fonts/
Source code of my pubspec.yaml file:
name: myapp
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '> =3.0.5 < 4.0.0'
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  cupertino_icons: ^1.0.2
  url_launcher: ^6.1.12
  flutter_widget_from_html_core: ^0.10.3
  google_fonts: ^5.1.0

dev_dependencies:
  intl: ^0.18.0-nullsafety.2
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

assets:
  - google_fonts/
4. Import google_fonts.dart package.
import 'package:google_fonts/google_fonts.dart';
5. Syntax of adding local Google fonts in flutter app.
GoogleFonts.getFont('Font Name', Pass-Text-Style),
6. Integrating local google fonts on flutter text.
Column(children: [
      Text(
        'Google Fonts in Flutter App',
        style: GoogleFonts.getFont('Bowlby One SC',
            fontSize: 28, color: Colors.red),
        textAlign: TextAlign.center,
      ),
      Text(
        'One',
        style: GoogleFonts.getFont('Comfortaa',
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Two',
        style: GoogleFonts.getFont('Caveat',
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Three',
        style: GoogleFonts.getFont('Great Vibes',
            fontSize: 50, color: Colors.black),
      ),
      Text(
        'Four',
        style: GoogleFonts.getFont('Julius Sans One',
            fontSize: 50, color: Colors.black),
      )
    ])
7. Complete source code for main.dart file after adding local Google Fonts:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(children: [
      Text(
        'Google Fonts in Flutter App',
        style: GoogleFonts.getFont('Bowlby One SC',
            fontSize: 28, color: Colors.red),
        textAlign: TextAlign.center,
      ),
      Text(
        'One',
        style: GoogleFonts.getFont('Comfortaa',
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Two',
        style: GoogleFonts.getFont('Caveat',
            fontSize: 50,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
      Text(
        'Three',
        style: GoogleFonts.getFont('Great Vibes',
            fontSize: 50, color: Colors.black),
      ),
      Text(
        'Four',
        style: GoogleFonts.getFont('Julius Sans One',
            fontSize: 50, color: Colors.black),
      )
    ])))));
  }
}
Screenshot:
Flutter Add Google Fonts
Labels:

Comments

Post a Comment