Using Custom Fonts in Flutter

Using Custom Fonts in Flutter is really easy.

Watch Video Tutorial
 

 

Here I have a folder named “fonts” in my project folder. I also have a font file “Roboto-Medium” in fonts folder.
 

Register font in pubspec.yaml
 
If you open pubspec.yaml file, you will see commented out fonts section below the file. You can uncomment that and add your own font.
 

....
fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Medium.ttf // path to your font file
          style: italic

 
Now we will create a function that returns a TextStyle.
 

 TextStyle getCustomFontStyle() {
    return const TextStyle(
      color: Colors.blueAccent,
      fontFamily: 'Roboto',
      fontWeight: FontWeight.w400,
      fontSize: 55.0,
    );
  }

 
Now we will apply the font to the Text.
 

Text("Hello Flutter",
     style: getCustomFontStyle(),
),

Complete Example
 

import 'package:flutter/material.dart';

class CustomFontDemo extends StatefulWidget {
  CustomFontDemo() : super();

  final String title = "Custom Font Demo";

  @override
  CustomFontDemoState createState() => CustomFontDemoState();
}

class CustomFontDemoState extends State<CustomFontDemo> {
  //
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Font Demo"),
      ),
      body: Container(
        child: Center(
          child: Text(
            "Hello Flutter",
            style: getCustomFontStyle(),
          ),
        ),
      ),
    );
  }

  TextStyle getCustomFontStyle() {
    return const TextStyle(
      color: Colors.blueAccent,
      fontFamily: 'Roboto',
      fontWeight: FontWeight.w400,
      fontSize: 55.0,
    );
  }
}

 
Leave your valuable comments below the post.
Thanks.