Use Google Fonts in Flutter

Using Google Fonts in Flutter App

In this section, you will learn how to use Google fonts in your flutter application with the help of examples.

Use Google Fonts in Flutter

To use Google fonts in your flutter application, follow the below steps:

1. Add google_fonts package in your flutter project.
2. Use google fonts in your flutter application.

Add google_fonts Package

To use Google fonts in your application, you need to add the google_fonts plugin. Open terminal at your project folder and execute the following command:

flutter pub add google_fonts

Run Pub Get

After saving the pubspec.yaml file, run pub get in your terminal to fetch the package:

  flutter pub get

Import the google_fonts Package

Now, you need to import the google_fonts package in your flutter application. To import the google_fonts package, open your main.dart file and add the following import statement:

import 'package:google_fonts/google_fonts.dart';

Use the Google Fonts

Now, you can use the Google fonts in your flutter application. To use the Google fonts, open your main.dart file and add the following code in it:

Text(
  'Hello I am John Doe',
  style: GoogleFonts.roboto(
    fontSize: 20,
    fontWeight: FontWeight.w500,
    color: Colors.blue,
  ),
)

Specifying Font Weights and Styles

If you want to use specific font weights or styles that are not the default, you can specify them when you use the font.

style: GoogleFonts.roboto(
  fontWeight: FontWeight.w700, // Bold
  fontStyle: FontStyle.italic, // Italic
),

Full Example

To use the Google fonts in your flutter application, open your main.dart file and add the following code in it:

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(
        title: 'Use Google Fonts in Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Google Fonts in Flutter'),
          ),
          body: Center(
            child: Text(
              'Hello I am John Doe',
              style: GoogleFonts.roboto(
                fontSize: 20,
                fontWeight: FontWeight.w500,
                color: Colors.blue,
              ),
            ),
          ),
        ));
  }
}