How to use custom fonts in Flutter?

In this post, you will learn to use custom fonts in Flutter. We will follow six simple steps for this.

Steps to use custom fonts in Flutter:

  1. Go to https://fonts.google.com/. Search and click on the font family that you want to use in your Flutter app. I will use the “Lobster” font family.

2. Now, click on “Download family”.

3. Now, create a “fonts” directory at the root of your flutter project.

4. Now, you will extract the zip file that you downloaded from fonts.google.com. Copy the font file (“Lobster-Regular” in my case) and paste that inside the fonts directory that you just created.

5. Now, open the pubspec.yaml file and add the code below.

flutter:
  fonts:
    - family: Lobster
      fonts:
        - asset: fonts/Lobster-Regular.ttf

Replace “Lobster” with the name of the font family that you will use. Also, replace “Lobster-Regular.ttf” with the name of the font file associated with the font family. Now, we are ready to use the font.

6. Apply the font like this –

Text('DeveloperXon',
          style: TextStyle(fontFamily: 'Lobster', fontSize: 50.0),
        )

Here’s the full code.

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 Fonts',
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Fonts')),
      body: const Center(
        child: Text('DeveloperXon',
          style: TextStyle(fontFamily: 'Lobster', fontSize: 50.0),
        ),
      ),
    );
  }
}

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: