Flutter Custom Font app

Using fontFamily keyword to changing the text style in app.

Import the font files

we need to import the font files into the project. It is common practice to put font files in a fonts or assets folder at the root of a Flutter project.

Declare the font in the pubspec.yaml

pubspec.yaml

fonts:
  - family: AllCrackedOut
    fonts:
      - asset: fonts/AllCrackedOut.ttf
  - family: Alyfe_Demo
    fonts:
      - asset: fonts/Alyfe_Demo.ttf
  - family: Amagh_Demo
    fonts:
      - asset: fonts/Amagh_Demo.ttf
  - family: Got_Heroin
    fonts:
      - asset: fonts/Got_Heroin.ttf
  - family: SNIPER__
    fonts:
      - asset: fonts/SNIPER__.ttf
  - family: vtks_distress
    fonts:
      - asset: fonts/vtks_distress.ttf
  - family: Antibalon
    fonts:
      - asset: fonts/Antibalon.otf

Now that we have a font to work with, we need to tell Flutter where to find it. We can do so by including a font definition in the pubspec.yaml.

main.dart File

The value we provide to fontFamily must match the family name declared in the pubspec.yaml

child: new Scaffold(
  appBar: new AppBar(title: new Text('Font App')),
  body: new Container(
    margin: const EdgeInsets.all(30.0),
    alignment: Alignment.center,
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Text(
          "Batman",
          style: new TextStyle(
            fontFamily: 'vtks_distress',
            fontSize: 25.0,
          ),
        ),
        new Text(
          "Superman",
          style: new TextStyle(
            fontFamily: 'Amagh_Demo',
            fontSize: 35.0,
          ),
        ),
        new Text(
          "Wonder Woman",
          style: new TextStyle(
              fontFamily: 'Alyfe_Demo',
              fontSize: 30.0,
              fontWeight: FontWeight.bold),
        ),
        new Text(
          "Aquaman",
          style: new TextStyle(
            fontFamily: 'SNIPER__',
            fontSize: 40.0,
          ),
        ),
        new Text(
          "Steppenwolf",
          style: new TextStyle(
            fontFamily: 'Antibalon',
            fontSize: 30.0,
          ),
        ),
        new Text(
          "Cyborg",
          style: new TextStyle(
            fontFamily: 'Got_Heroin',
            fontSize: 40.0,
          ),
        ),
        new Text(
          "The Flash",
          style: new TextStyle(
            fontFamily: 'vtks_distress',
            fontSize: 25.0,
          ),
        ),
      ],
    ),
  ),
)

Screenshots

flutter font style