Flutter - Using Google fonts

Last Updated : 04 Mar, 2025

Any UI developer that builds an application has to deal with fonts. Google Fonts provides a wide range of fonts that can be used to improve the fonts of the User Interface. Flutter provides a Google fonts package that can be used to implements various available fonts.

Some fonts that are available for use through the Google fonts package are listed below:

Roboto
Open sans
Lato
Oswald
Raleway

Steps to Implement Google fonts in Flutter

Step 1 : Adding Dependency

Use the Google fonts dependency in the pubspec.yaml as shown below:

dependencies:
      google_fonts: ^6.2.1

Now run the below command in terminal.

flutter pub get

Step 2 : Importing Dependency

To import the dependency in the main.dart file as below:

import 'package:google_fonts/google_fonts.dart';

Step 3 : Creating the application structure

Use the StatelessWidget to give a simple structure to the application as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

Step 4 : Designing the Homepage

To design, the homepage for the application makes use of the StatefulWidget. Initiate the state at 0 that counts the number of clicks on the button that we will be adding to the homepage.

Dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

Step 5 : Implementing the fonts

The font that we will be Oswald font and Lato font. In the TextStyle property you can add the same as shown below:

Dart

Column(
          children: <Widget>[
              
              //here display1 is nothing but
              //final TextStyle? display1 = Theme.of(context).textTheme.headlineMedium;
              
            Text(
              'You have pushed the button this many times:',
              style: GoogleFonts.oswald(textStyle: display1),
              ] ),
            Text(
              '$_counter',
               style: GoogleFonts.lato(
                    fontStyle: FontStyle.italic,
                    fontSize: 20,
                    color: Colors.green,
                    fontWeight: FontWeight.bold
              ),
            ),
         ],
),

To know more about Column in flutter refer this article: Flutter – Row and Column Widgets

Complete Source Code (main.dart)

Dart

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

// Entry point of the application
void main() => runApp(MyApp());

// Main application widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

// Home page widget with state
class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// State class for the home page
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // Function to increment the counter
  void _incrementCounter() {
        setState(() {
          _counter++;
        });
  }

  @override
  Widget build(BuildContext context) {
    final TextStyle? display1 = Theme.of(context).textTheme.headlineMedium;
    return Scaffold(
      appBar: AppBar(
            title: Text(widget.title),
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
      ),
      body: Center(
        child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                          Text(
                            'You have pushed the button this many times:',
                            style: GoogleFonts.oswald(textStyle: display1),
                          ),
                          Text(
                            '$_counter',
                            style: GoogleFonts.lato(
                                fontStyle: FontStyle.italic,
                                fontSize: 20,
                                color: Colors.green,
                                fontWeight: FontWeight.bold),
                          ),
                ],
              ),
            ),
      ),
      floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Output:

Flutter - Using Google fonts

ddeevviissaavviittaa

Improve

Article Tags :

Flutter - Using Google fonts

Steps to Implement Google fonts in Flutter

Step 1 : Adding Dependency

Step 2 : Importing Dependency

Step 3 : Creating the application structure

Step 4 : Designing the Homepage

Step 5 : Implementing the fonts

Complete Source Code (main.dart)

Similar Reads

Thank You!

What kind of Experience do you want to share?