Flutter Use Custom Fonts

Flutter supports easy custom fonts setup in their apps. I am using 5 types of custom fonts as demo to show you how to integrate custom downloaded fonts in flutter app. It's very easy to add custom fonts all we have to do is put downloaded fonts in fonts folder and then define the fonts path in pubspec.yaml file. I am explaining all the steps below.

Flutter Use Custom Fonts:

1. Download and Setup Custom Font in app folder:

1. Download your desire custom font online, For demo purpose I have downloaded fonts from Google Fonts.

2. Create a folder fonts in your flutter app.

3. Copy downloaded fonts in fonts folder.

2. Configure Custom Fonts name & Path in pubspec.yaml file:

1. Open your project's pubspec.yaml file in code editor.

2. Define all the downloaded fonts in the pubspec.yaml file.

fonts:
    - family: AbrilFatface
      fonts:
        - asset: fonts/AbrilFatface-Regular.ttf
    - family: Anton
      fonts:
        - asset: fonts/Anton-Regular.ttf
    - family: DMSerifDisplay
      fonts:
        - asset: fonts/DMSerifDisplay-Regular.ttf
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Italic-VariableFont_wght.ttf
          style: italic
        - asset: fonts/Raleway-VariableFont_wght.ttf
          weight: 700

3. Full source code for pubspec.yaml file:

name: myapp
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  // sdk: '=3.0.5 4.0.0'
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

  fonts:
    - family: AbrilFatface
      fonts:
        - asset: fonts/AbrilFatface-Regular.ttf
    - family: Anton
      fonts:
        - asset: fonts/Anton-Regular.ttf
    - family: DMSerifDisplay
      fonts:
        - asset: fonts/DMSerifDisplay-Regular.ttf
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Italic-VariableFont_wght.ttf
          style: italic
        - asset: fonts/Raleway-VariableFont_wght.ttf
          weight: 700

3. Defining Text widget with custom fonts:

1. Creating Text with AbrilFatface custom font family.

Text(
                'AbrilFatface font',
                style: TextStyle(fontSize: 30, fontFamily: 'AbrilFatface'),
              )

2. Creating Text with Anton font family.

Text(
        'Anton font',
        style: TextStyle(fontSize: 30, fontFamily: 'Anton'),
      )

3. Creating text with DMSerifDisplay font family.

Text(
        'DMSerifDisplay font',
        style: TextStyle(fontSize: 30, fontFamily: 'DMSerifDisplay'),
      )

4. Creating text with Pacifico font family.

Text(
        'Pacifico font',
        style: TextStyle(fontSize: 30, fontFamily: 'Pacifico'),
      )

5. Creatint text with Raleway regular, Raleway bold and Raleway italic font.

 const Text(
        'Raleway font',
        style: TextStyle(fontSize: 30, fontFamily: 'Raleway'),
      ),
      const Text(
        'Raleway italic font',
        style: TextStyle(
            fontSize: 30, fontFamily: 'Raleway', fontStyle: FontStyle.italic),
      ),
      const Text(
        'Raleway Bold font',
        style: TextStyle(
            fontSize: 30, fontFamily: 'Raleway', fontWeight: FontWeight.bold),
      )

6. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      Center(
          child: Container(
              padding: const EdgeInsets.fromLTRB(15, 25, 15, 0),
              child: const Text(
                'AbrilFatface font',
                style: TextStyle(fontSize: 30, fontFamily: 'AbrilFatface'),
              ))),
      const Text(
        'Anton font',
        style: TextStyle(fontSize: 30, fontFamily: 'Anton'),
      ),
      const Text(
        'DMSerifDisplay font',
        style: TextStyle(fontSize: 30, fontFamily: 'DMSerifDisplay'),
      ),
      const Text(
        'Pacifico font',
        style: TextStyle(fontSize: 30, fontFamily: 'Pacifico'),
      ),
      const Text(
        'Raleway font',
        style: TextStyle(fontSize: 30, fontFamily: 'Raleway'),
      ),
      const Text(
        'Raleway italic font',
        style: TextStyle(
            fontSize: 30, fontFamily: 'Raleway', fontStyle: FontStyle.italic),
      ),
      const Text(
        'Raleway Bold font',
        style: TextStyle(
            fontSize: 30, fontFamily: 'Raleway', fontWeight: FontWeight.bold),
      ),
    ])));
  }
}

Screenshot: