Why we need to add custom font in our app:

let's say we have a one screen like this,

now you have to change the font style of some of this font like this,

so how we can do this with custom font ".ttf " file?

Let's Start:

step 1:We have to create assets folder in our project file and add font that we have to add in our application it will look like this:

then we have to add those font also in our pubspec.yaml for using this in our application so add this code in the end of your pubspec.yaml file


fonts:
    - family: EastSeaDokdo-Regular
      fonts:
        - asset: assets/fonts/EastSeaDokdo-Regular.ttf

and it will look like this

now let's see how we use this font in our whole application by adding this at only one place in our main app ThemeData set this font to default font of our application by adding this code in your MaterialApp ThemeData

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter custom font demo',
      theme: ThemeData(
        fontFamily: 'EastSeaDokdo-Regular'
      ),
      home: const HomePage(),
    );
  }
}

now this is default font family of your application at any where you use font widget it will consider the "EastSeaDokdo-Regular" font family by defaultthe result is looks like this with code:

let's custom some font by adding second font family and use this in our application.

add second font family at same folder in assets and add don't forget to add this in pubspec.yaml


fonts:
    - family: EastSeaDokdo-Regular
      fonts:
        - asset: assets/fonts/EastSeaDokdo-Regular.ttf
        
    # add this for second font family
    
    - family: Sevillana-Regular
      fonts:
        - asset: assets/fonts/Sevillana-Regular.ttf

now let's use this font family for particular part of our fonts what if we have to set font like this:

we just simply do some small change and it will be done we just have to add font family on textstyle at where we want to custom our font

            Text(
                "custom font for your",
                style: TextStyle(
                
     /// just add this and you are donw with your custome fonts
                
                  fontFamily: 'Sevillana-Regular',
                  
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                ),
              ),

your final output is looks like:

this all you have done for adding custom fonts in your application.

Read Also : How to implement navigation drawer in flutter | Thirdock Techkno

How to add custom font at particular space in your app - Flutter in 2026

Why we need to add custom font in our app:

Let's Start:

Got a Project?

Featured Insights

LET'S WORK

TGETHER

India