Flutter - Custom fonts family

If you are a mobile application developer. You definitely know, we should implement uniform themes in our application. Uniform themes are a great way to create a consistent look for your application. They can makes applications look very similar to each other.

Custom font is a way to achieve it. Fonts can be very important in mobile applications. They make a text more readable and show more attention to various pieces of text. Fonts can make a format look bad or look great depending on how they are integrated into the application. Flutter comes with a few default fonts, however, we are also able to import custom font assets as we would like. After importing the fonts, we can directly call them in the dart code by passing a string to a property.

In this post, we'll look at importing custom fonts and using them inside of our application. At the end of this blog, we will be able to add Text with some fonts using flutter widgets which will look like this.

Create a new Flutter Project.

1. Create a new project from File ⇒ New Flutter Project with your development IDE.  
2. Create an asset folder on the project root and put all custom fonts that you want to use in the project. As you can see below.

3. After that, declare all the custom fonts in the pubspec.yaml.

As you can see, the font declarations inside of the pubspec.yaml file for our application. In Flutter, we are able to directly specify which font file should correspond with which font family, font weight and font style. This allows us to call these values inside of our application later in a way that feels comfortable.

4. Now, open main.dart file and edit it. As we have set our theme and change debug banner property of Application.

main.dart
 void main() {
  MapView.setApiKey(MapUtil.api_key);
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: new ThemeData(
      primaryColor:  const Color(0xFF02BB9F),
      primaryColorDark: const Color(0xFF167F67),
      accentColor: const Color(0xFFFFAD32),
    ),
    home: new HomePage(),
  ));
}

5. After that create a getCustomFont method inside HomePage state full widget class. It'll give a font according to the given param. 

main.dart
TextStyle getCustomFont(int color, double fontSize,String fontName) {
    return new TextStyle(
        // set color of text
        color: Color(color),
        // set the font family as defined in pubspec.yaml
        fontFamily: fontName,
        // set the font weight
        fontWeight: FontWeight.w400,
        // set the font size
        fontSize: fontSize);
}

6. Now edit build method of HomePage widget. As we have used a column inside of the container and call getCustomFont from the text with different font name, size, and color. Font name should be same as we have declared in the pubspec.yaml.

main.dart
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Custom Fonts",
          style: getCustomFont(0xFFFFFFFF, 30.0,"Brandon_bld"),
        ),
      ),

      body:new SingleChildScrollView(

        child: new Container(
          padding: EdgeInsets.all(30.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Text(
                "Fonts Pacifico",
                style: getCustomFont(0xFFFF75AA, 40.0,"Pacifico"),
              ),
              new Text(
                "Fonts Brandon bold",
                style: getCustomFont(0xFF02BB9F, 30.0,"Brandon_bld"),
              ),
              new Text(
                "Fonts Brandon bold dark",
                style: getCustomFont(0xFF167F67, 30.0,"Brandon_blk"),
              ),
              new Text(
                "Fonts Brandon light",
                style: getCustomFont(0xFFFFAD32, 30.0,"Brandon_light"),
              ),
              new Text(
                "Fonts Brandon medium",
                style: getCustomFont(0xFF808000, 30.0,"Brandon_med"),
              ),
              new Text(
                "Fonts Brandon regular",
                style: getCustomFont(0xFF00FF00, 40.0,"Brandon_re"),
              ),
              new Text(
                "Fonts Brandon thin",
                style: getCustomFont(0xFFFA8072, 35.0,"Brandon_thin"),
              ),
              new Text(
                "Fonts Pacifico Regular",
                style: getCustomFont(0xFF8000805, 30.0,"Pacifico_Regular"),
              ),
              new Text(
                "Fonts Roboto bold",
                style: getCustomFont(0xFF757575, 35.0,"Roboto_bold"),
              ),
            ],
          ),
        ),
      )
    );
  }

Now merge all the code snippet. You will find the final code snippet look like below.

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

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Infinite List',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primaryColor:  const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFFFFAD32),
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextStyle getCustomFont(int color, double fontSize,String fontName) {
    return new TextStyle(
      // set color of text
        color: Color(color),
        // set the font family as defined in pubspec.yaml
        fontFamily: fontName,
        // set the font weight
        fontWeight: FontWeight.w400,
        // set the font size
        fontSize: fontSize);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Custom Fonts",
          style: getCustomFont(0xFFFFFFFF, 30.0,"Brandon_bld"),
        ),
      ),

      body:new SingleChildScrollView(

        child: new Container(
          padding: EdgeInsets.all(30.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Text(
                "Fonts Pacifico",
                style: getCustomFont(0xFFFF75AA, 40.0,"Pacifico"),
              ),
              new Text(
                "Fonts Brandon bold",
                style: getCustomFont(0xFF02BB9F, 30.0,"Brandon_bld"),
              ),
              new Text(
                "Fonts Brandon bold dark",
                style: getCustomFont(0xFF167F67, 30.0,"Brandon_blk"),
              ),
              new Text(
                "Fonts Brandon light",
                style: getCustomFont(0xFFFFAD32, 30.0,"Brandon_light"),
              ),
              new Text(
                "Fonts Brandon medium",
                style: getCustomFont(0xFF808000, 30.0,"Brandon_med"),
              ),
              new Text(
                "Fonts Brandon regular",
                style: getCustomFont(0xFF00FF00, 40.0,"Brandon_re"),
              ),
              new Text(
                "Fonts Brandon thin",
                style: getCustomFont(0xFFFA8072, 35.0,"Brandon_thin"),
              ),
              new Text(
                "Fonts Pacifico Regular",
                style: getCustomFont(0xFF8000805, 30.0,"Pacifico_Regular"),
              ),
              new Text(
                "Fonts Roboto bold",
                style: getCustomFont(0xFF757575, 35.0,"Roboto_bold"),
              ),
            ],
          ),
        ),
      )
    );
  }
}

Now, run the project and you will see the above output.

If you have followed the article carefully, you can see the app running very smoothly as shown above. But if you facing any problem, please feel free to ask in the comment section below.