Nandhakumar's Display Picture


Feb 18, 2023

3 min read

Add Custom Font in Flutter





Add Custom Font in Flutter

Hi There! 👋

Recently, I was developing a clothing store app using flutter. And I was about to use a custom font, so researched flutter docs to find a way to add custom fonts.

Here's how I did 👇

Download your fonts

As a first step download the required fonts. Flutter supports .ttc,.ttf and .otf fonts. It doesn't support .woff and .woff2 fonts for all platforms.

Add Fonts To Your Project

Create assets/fonts in the root level of the project

Add all your fonts.

In my case, I am adding all styles of EncodeSans Font to Fonts directory

Project Structure

Declare Fonts In Pubspec.yml

    - family: EncodeSans
        - asset: assets/fonts/EncodeSans-Black.ttf
          weight: 900
        - asset: assets/fonts/EncodeSans-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/EncodeSans-Bold.ttf
          weight: 700
        - asset: assets/fonts/EncodeSans-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/EncodeSans-Medium.ttf
          weight: 500
        - asset: assets/fonts/EncodeSans-Regular.ttf
          weight: 400
        - asset: assets/fonts/EncodeSans-Thin.ttf
          weight: 300
        - asset: assets/fonts/EncodeSans-Light.ttf
          weight: 200
        - asset: assets/fonts/EncodeSans-ExtraLight.ttf
          weight: 100

Create a Font Family Typography Class

Creating a common Typography class that holds font family styles would help in using font family throughout the application

Add constant/typography.dart file under lib directory

// typography.dart

import 'package:flutter/material.dart';

class Typogaphy {
  static TextStyle Black =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w900);

  static TextStyle ExtraBold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w800);

  static TextStyle Bold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w700);

  static TextStyle SemiBold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w600);

  static TextStyle Medium =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w500);
  static TextStyle Regular =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w400);
  static TextStyle Thin =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w300);
  static TextStyle Light =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w200);
  static TextStyle ExtraLight =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w100);

Using Font Family From The Typography Class

To use the font family declared in the typography class, use copyWith method to merge typography style with text-specific style.

Text('This is a Semi Bold Typo',
                  style: Typogaphy.SemiBold.copyWith(
                    fontSize: 40,

Here's my main.dart file looks like

// main.dart

import 'package:clothing_store/constant/typography.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Typo',
      theme: ThemeData(
      home: const MyHomePage(title: 'Flutter Demo Home Page'),

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title,
            style: Typogaphy.SemiBold.copyWith(color: Colors.white)),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('This is a Semi Bold Typo',
                  style: Typogaphy.SemiBold.copyWith(
                    fontSize: 40,

For simplicity, I have created a basic typography class with font families alone. Based on your application requirement, you can extend it.

Final Result

Image description


In this post, you have learned how to add a custom font, what fonts are supported by the flutter and how to reuse font family throughout the application.

Thanks For Reading!

Hope you have learned something new today 😊.

I welcome your questions, feedback, and discussions on this topic. Don't hesitate to reach out if there's something you'd like to talk about.

If you find this post helpful Tweet this Post

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Cheers ✌️