How to use a custom font style in flutter?

问题

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

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

But I don't know to use, for example, the style "Roboto-Light.ttf" from Roboto in my widget. I tried this:

new ListTile(
          title: new Text(
            "Home",
            style: new TextStyle(
              fontFamily: "Roboto",
              fontSize: 60.0,
            ),
          ),
        ),

I don't know how to access the style "Roboto-Light.ttf". How to do this?

Thanks!

回答1:

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.

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/52132135/how-to-use-a-custom-font-style-in-flutter