Easy Guide: Setting Font Style in Flutter App Using Google Fonts

Setting Font Style in Flutter App

Step 1: Install the Google Fonts Plugin

Firstly, you need to install the google_fonts plugin. This plugin helps you easily integrate Google Fonts into your Flutter app. To install it, add the following dependency to your pubspec.yaml file under dependencies:

dependencies:
  google_fonts: ^2.2.0 # Check for the latest version on pub.dev

After making the changes, run flutter pub get in your terminal to install the plugin

Step 2: Mention Google Font in Theme

Now, you’ll want to specify the Google Font you want to use in your app. Open your main.dart file and import the necessary packages:

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

In the MaterialApp widget, set the theme property to include your desired Google Font:

In this we are using macondoTextTheme this font family reflect on all pages of App

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.macondoTextTheme(
        Theme.of(context).textTheme
       )
     primaryColor:Colors.blue,
      ),
      home: YourHomePage(), // Replace with your home page widget
    );
  }
}

Step 3: Update Main File

Ensure that you import the necessary packages in your main file, as shown in Step 2.

Step 4: Remove Font Family in All Pages

To apply the new font style throughout your app, you can remove the font family declarations in all your pages. You can use the “Ctrl + Shift + F” shortcut to find and replace the font family with an empty string or comment it out using “//“.

Step 5: Rerun App

After making these changes, save your files and rerun your app using flutter run in the terminal.

Note: Custom Font Styles

If you ever need to use a different font style in specific parts of your app, you can manually add the font family as needed.

By following these steps, you should now have a consistent font style across your entire Flutter app using Google Fonts.