How to use a custom font style in flutter?

Question

I have already set on my pubspec.yaml the following code:

fonts:
- family: Roboto
  fonts:
    - asset: fonts/Roboto-Light.ttf
    - asset: fonts/Roboto-Thin         


        

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

You can use TextStyle widget to show any custom font in your flutter application.

Text( “Home”, style: TextStyle(fontFamily: ‘Roboto-Light’))

You can also use google fonts in your application if you want. You can also refer this flutter fonts tutorial.