Related Resources

Our Services

You May Also Like

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

karan chodavadiya

Jan 02, 2023

3 min readLast Updated Jan 02, 2023

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

    - family: EastSeaDokdo-Regular
        - 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.
  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 default

the 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

    - family: EastSeaDokdo-Regular
        - asset: assets/fonts/EastSeaDokdo-Regular.ttf
    # add this for second font family
    - family: Sevillana-Regular
        - 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

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

Projects Completed till now.

Discover how we can help your business grow.

"Third Rock Techkno's work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter."

- Dr Daniel T. Michaels, NINS