How to use a custom font style in flutter?

Declare and Access the font correctly.

Declare the font path in the pubspec.yaml file.

Follow the correct indentation.
For example, I have added IndieFlower-Regular.ttf file inside fonts folder. This is how my pubspec.yaml file looks like.

flutter:

 uses-material-design: true

 fonts:
   - family: Indies
   fonts:
     - asset: fonts/IndieFlower-Regular.ttf
       

Accessing the font in TextStyle

style: TextStyle(
      color: Colors.green,
      fontSize: 30.0,
      fontFamily: 'Indies'
),

For better understanding here is the picture which shows the font, pubspec.yaml and the output.

In general, you can specify the font styles directly.

pubspec.yaml

  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Light.ttf
          weight: 300
        - asset: fonts/Roboto-Thin.ttf
          weight: 100
        - asset: fonts/Roboto-Italic.ttf
          style: italic

Widget

ListTile(
  title: Text(
    'Home',
    style: TextStyle(
      fontFamily: 'Roboto',
      fontWeight: FontWeight.w300, // -> Roboto-Light.ttf
      // fontWeight: FontWeight.w100 // -> Roboto-Thin.ttf
      fontSize: 60.0,
    ),
  ),
),

Roboto is the default font of the Material style, there is no need to add it in pubspec.yaml.

To use the different variations, set a TextStyle

Text(
  'Home',
  style: TextStyle(
    fontWeight: FontWeight.w300, // light
    fontStyle: FontStyle.italic, // italic
  ),
);

I think thin is FontWeight.w200.

The FontWeights for the corresponding styles are mentioned in the styles section of the particular font in GoogleFonts website.

Note: this is only if you prefer using fonts from fonts.google.com

One of the coolest and easiest way to use google fonts is to use the google_fonts_package.

The google_fonts package for Flutter allows you to easily use any of the 960 fonts (and their variants) from fonts.google.com in your Flutter app.With the google_fonts package, .ttf files do not need to be stored in your assets folder and mapped in the pubspec. Instead, they are fetched once via http at runtime, and cached in the app's file system.

Installation

1. add to pubspec.yaml

google_fonts: ^0.1.0

2. import

import 'package:google_fonts/google_fonts.dart';

3. use your font e.g

Text("TestText", style:GoogleFonts.dancingScriptTextStyle(
              fontSize: 25,
              fontStyle: FontStyle.normal,
    )

Although it mentions that it should not be used in production but I see an app deployed on both playstore and appstore by Tim Sneath and works perfectly heres the open source code hope this helps