Custom fonts in Flutter

Introduction

Custom fonts let you use your favorite text styles in your app. This makes your app look unique and match your brand or style.

You want your app to have a special look with unique text styles.

You need to use a font that matches your company logo or design.

You want to improve readability with a font that suits your content.

You want to support different languages with specific fonts.

You want to make your app stand out from others with custom typography.

Syntax

Flutter

1. Add font files (e.g., .ttf) to your project folder, usually under assets/fonts.
2. Update pubspec.yaml to include the font:

flutter:
  fonts:
    - family: YourFontName
      fonts:
        - asset: assets/fonts/YourFontFile.ttf

3. Use the font in your app:

Text('Hello', style: TextStyle(fontFamily: 'YourFontName'))

The font family name in pubspec.yaml is what you use in your TextStyle.

Make sure to run flutter pub get after editing pubspec.yaml.

Examples

This example adds the Roboto font from the assets folder.

Flutter

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

This uses the Roboto font for the text.

Flutter

Text('Welcome', style: TextStyle(fontFamily: 'Roboto'))

This example adds OpenSans font with regular and bold weights.

Flutter

flutter:
  fonts:
    - family: OpenSans
      fonts:
        - asset: assets/fonts/OpenSans-Regular.ttf
        - asset: assets/fonts/OpenSans-Bold.ttf
          weight: 700

This uses the bold weight of OpenSans font.

Flutter

Text('Bold Text', style: TextStyle(fontFamily: 'OpenSans', fontWeight: FontWeight.bold))

Sample App

This app shows text using the custom font named 'Lobster'. You need to add the Lobster font file to assets/fonts and declare it in pubspec.yaml before running.

Flutter

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: 'Custom Font Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Custom Font Example')),
        body: const Center(
          child: Text(
            'Hello with Custom Font!',
            style: TextStyle(fontFamily: 'Lobster', fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Important Notes

Always check the font license before using it in your app.

If the font does not show, check the pubspec.yaml indentation and asset paths carefully.

You can add multiple fonts and weights for more style options.

Summary

Custom fonts make your app text unique and stylish.

Add font files to assets and declare them in pubspec.yaml.

Use the font family name in TextStyle to apply the font.