Understand the custom fonts in Flutter Before You Regret

Android and iOS offers a lots of high quality system fonts for their native apps. We  can also use some other custom fonts in our apps.

In this tutorial, we will be implementing custom google fonts in our flutter app. In order to use custom fonts, we have to follow the following easy steps:

  1. Download the required fonts from Google Fonts.
  2. Import them into the flutter project.
  3. Declare the font in the pubspec.yaml
  4. Using the Custom Fonts.

1. Download the required fonts from Google Fonts

Google fonts provide a wide variety of web fonts which we can use both in the web apps and mobile apps. To download fonts, visit Google Font.

2. Import them into the flutter project

Once we downloaded the fonts zip file. Extract them.

Now lets create one fonts folder inside our project (not inside the lib) and place all the fonts as shown in the screenshot:

custom fonts
fonts folder inside the project folder

3. Declare the fonts in the pubspec.yaml

Now, we will declare all the fonts into pubspec.yaml file. While adding into the pubspec.yaml, we have to be very careful as this file is space sensitive. Make sure the structure looks exactly the same as in the code below, otherwise we will get error during the sync process.

fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Bold.ttf
          weight: 700
        - asset: fonts/Raleway-Light.ttf
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Bold.ttf
          weight: 700
        - asset: fonts/Roboto-Light.ttf
    - family: Titillium
      fonts:
        - asset: fonts/TitilliumWeb-Bold.ttf
          weight: 700
        - asset: fonts/TitilliumWeb-Light.ttf
    - family: Anton
      fonts:
        - asset: fonts/Anton-Regular.ttf
          weight: 400

4. Using the Custom Fonts

Now once we have added it to pubspec.yaml, we are ready to use them in our project. 

We can also use custom font as our app’s default font by using the following code:

theme: ThemeData(fontFamily: 'Raleway')

But, we can also use multiple custom fonts in our app. For demonstration purposes, we are using here 3 different fonts with Text widget as below:

        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Roboto',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Roboto',
            fontWeight: FontWeight.w700,
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Raleway',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Raleway',
            fontSize: 50,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'TitilliumWeb',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'TitilliumWeb',
            fontSize: 50,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Anton',
            fontSize: 50,
            fontWeight: FontWeight.w400,
          ),
        ),

Our overall main.dart file will have the following code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Custom Fonts in Flutter",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'Raleway'),
      home: Scaffold(
        appBar: AppBar(title: Text("Custom Fonts in Flutter")),
        body: MyCustomFont(),
      ),
    );
  }
}

class MyCustomFont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      child: Column(children: <Widget>[
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Roboto',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Roboto',
            fontWeight: FontWeight.w700,
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Raleway',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Raleway',
            fontSize: 50,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'TitilliumWeb',
            fontSize: 50,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'TitilliumWeb',
            fontSize: 50,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          "Hello World!",
          style: TextStyle(
            decoration: TextDecoration.none,
            fontFamily: 'Anton',
            fontSize: 50,
            fontWeight: FontWeight.w400,
          ),
        ),
      ]),
    ));
  }
}

Now , we will achieve as shown in the screenshot below:

custom fonts
Custom Font App

Happy Coding 🙂