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.

---