How To Add Custom Font in Flutter
Tags: flutter, dart, mobileapp, typography
Published: 2023-02-17 23:36:19

---
title: How To Add Custom Font in Flutter
published: true
description: 
tags: #flutter #dart #mobileapp #typography
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tci770xubgmi7r15voox.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-09 10:42 +0000
---

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gsy6wt967hpode31zf5.png)

## Declare Fonts In Pubspec.yml

```bash
fonts:
    - family: EncodeSans
      fonts:
        - 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

```dart
// typography.dart

import 'package:flutter/material.dart';

const String _FONT_FAMILY = 'EncodeSans';

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.

```dart
Text('This is a Semi Bold Typo',
                  textAlign: TextAlign.center,
                  style: Typogaphy.SemiBold.copyWith(
                    color: Colors.black,
                    fontSize: 40,
                  ))
```

Here's my main.dart file looks like

```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});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Typo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  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(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('This is a Semi Bold Typo',
                  textAlign: TextAlign.center,
                  style: Typogaphy.SemiBold.copyWith(
                    color: Colors.black,
                    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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsthe8yb19nmidaj5zgk.png)

## Conclusion

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 😊.

> Originally Posted On - https://www.nandhakumar.io/post/how-to-add-custom-font-in-flutter

[Follow me](https://dev.to/nandhakumar) to get notified of all upcoming posts.

Follow and connect with me on [Twitter](https://twitter.com/nandhakumar_io), [Instagram](https://www.instagram.com/nandhakumar.io/), [Email](mailto:contact@nandhakumar.io) and [LinkedIn](https://www.linkedin.com/in/nandhakumar-io/) for more interesting stuff like this.