How to change the default font family in Flutter

In today’s digital age, a visually appealing user interface is crucial for any mobile application. One way to achieve this is by selecting an attractive and readable font for your app’s UI components. In Flutter, you can easily customize the default font family of your app to match your brand or personal preferences.

Step 1: Add Your Font Files

The first step in changing the default font family of your Flutter app is to add the relevant font files into your project folder. This will vary depending on the type of fonts you’re using and how you’ve prepared them for use in your app.

Project Folder > assets > fonts > hind

In this example, we have added a custom font named ‘hind’ inside a folder called ‘fonts’ within the ‘assets’ directory of our project. You can replace ‘hind’ with any other font file you want to use in your app.

Step 2: Declare Font Family and Style

The next step is to declare the font family along with its style in your project’s pubspec.yaml file. This will enable Flutter to recognize and utilize these custom fonts within your application.

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  assets:
    - assets/fonts/hind.ttf

Here, we have added the ‘hind’ font file to our pubspec.yaml under the ‘assets’ section. Make sure to replace ‘hind.ttf’ with your actual font file name and extension.

Step 3: Define Default Font Family in MaterialApp Widget

To change the default font family of your Flutter app, you’ll need to define it within the MaterialApp widget of your main class file. This will set the primary font for all text components in your app.

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    fontFamily: 'hind', // Change default font family here
  ),
  home: MyHomePage(),
);

In this example, we’ve specified ‘hind’ as the default font family for our Flutter app. You can replace ‘hind’ with any other custom or system font you want to use.

Using Google Fonts with google_fonts Package

If you prefer using one of the many fonts available from Google, such as Lato, Roboto, or Montserrat, you can easily do so by incorporating the official google_fonts package into your project.

Step 1: Add google_fonts to Your Project’s pubspec.yaml File

To use Google Fonts with Flutter, you’ll first need to add the necessary dependency to your project’s pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  assets:
    - packages/google_fonts/fonts/

This will install the google_fonts package and its associated fonts into your Flutter project.

Step 2: Override Default Font in MaterialApp Widget

To change the default font family to one of these Google Fonts, you’ll need to override it within the MaterialApp widget of your main class file. This will set the primary font for all text components in your app.

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

In this example, we’ve specified Lato as the default font family for our Flutter app. You can replace ‘lato’ with any other Google Font you want to use.