Flutter - Using Google fonts

Last Updated : 23 Jul, 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),  ),  );  } }