Flutter add custom fonts

At some point we all needed to add custom fonts for our flutter applications and for that we have to follow following steps and it is super easy.

1. Download the font files
2. Add font files to a directory in the project
3. Update the pubspec.yaml file
4. Add custom fonts to the code

Let’s go through one by one.

Download the font files

I have selected Roboto font for this tutorial as there are 12 different weights and styles are embedded. Download all font files by clicking download family.

Add font files to a directory in the project

Then you have to make a subdirectory inside your project directory and move all your custom font files inside that directory.

Added Roboto fonts in fonts subdirectory in project directory

Update the pubspec.yaml file

Then add those font inside the pubspec.yaml file and for this tutorial I have selected few of above fonts and added them into the pubspec.yaml file as follows

fonts:
   - family: Roboto
     fonts:
       - asset: fonts/Roboto-Black.ttf
         weight: 900
       - asset: fonts/Roboto-BlackItalic.ttf
         weight: 900
         style: italic
       - asset: fonts/Roboto-Medium.ttf
         weight: 500
       - asset: fonts/Roboto-MediumItalic.ttf
         weight: 500
         style: italic

Add custom fonts to the code

After a flutter pub get command you can add those fonts inside your project. You have to know how to input custom fonts using mentioning weights and styles.

• There is only having a weight

If in the font is only mention the font weight in the pubspec.yaml file then you have to call those fonts using font family and font weight as follows

Text(
  "Roboto Black only",
  textScaleFactor: 1.5,
  style: TextStyle(
    fontFamily: "Roboto",
    fontWeight: FontWeight.w900,
  ),
)

As you see in the above example the fontFamily is added same as mentioned in the pubspec.yaml file and the fontWeight is added according to the yaml file.

• There is font weight and style both mentioned

If the font weight and font style is mentioned then you have to mention both in the code in order to call the desired font in the project as follows

Text(
  "Black Italic",
  textScaleFactor: 1.5,
  style: TextStyle(
    fontFamily: "Roboto",
    fontWeight: FontWeight.w900,
    fontStyle: FontStyle.italic,
  ),
),

Following is a sample code example with preview

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Tutorial",
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text tutorial"),
      ),
      body: Column(
        children: <Widget>[
          Text(
            "Black Italic",
            textScaleFactor: 1.5,
            style: TextStyle(
              fontFamily: "Roboto",
              fontWeight: FontWeight.w900,
              fontStyle: FontStyle.italic,
            ),
          ),
          Text(
            "Black only",
            textScaleFactor: 1.5,
            style: TextStyle(
              fontFamily: "Roboto",
              fontWeight: FontWeight.w900,
            ),
          ),
          Text(
            "Medium Italic",
            textScaleFactor: 1.5,
            style: TextStyle(
              fontFamily: "Roboto",
              fontWeight: FontWeight.w500,
              fontStyle: FontStyle.italic,
            ),
          ),
          Text(
            "Medium only",
            textScaleFactor: 1.5,
            style: TextStyle(
              fontFamily: "Roboto",
              fontWeight: FontWeight.w500,
            ),
          ),
          Text(
            "Normal font",
            textScaleFactor: 1.5,
          )
        ],
      ),
    );
  }
}

Preview of the above code

Hopefully this is helpful.

If you have found this helpful please hit that 👏 and share it on social media :).

You can find the source code of this application on the following link https://github.com/yashodgayashan/flutter-tutorial/tree/customFonts