How to use a specific font from a list of fonts specified in a asset family in pubspec.yaml

user_9912796 0
Viewed 1890

Let's say i have added following lines to the pubspec.yaml file fonts:

fonts:
- family: GreatVibes
  fonts:
    - asset: fonts/GreatVibes-Regular.ttf
    - asset: fonts/GreatVibes-Bold.ttf

I am using it in my app with the following lines of code. 

new Text('My New Font',
        style: new TextStyle(
          color: Colors.white,
          fontFamily: 'GreatVibes',
          fontSize: 16.0,
        )),

My question is that ,among the two .ttf files provided earlier, how does flutter decides which file to use?

And Let's say if flutter decides to use GreatVibes-Bold.ttf, what can i do to make it use GreatVibes-regular.ttf

flutter-dependencies flutter-layout flutter
3 Answers

If I understand these font things correctly - it has to be like this:

fonts:
- family: GreatVibes
  fonts:
    - asset: fonts/GreatVibes-Regular.ttf
    - asset: fonts/GreatVibes-Bold.ttf
      weight: 700
    - asset: fonts/GreatVibes-Italic.ttf
      style: italic

And then

new Text('My New Font',
    style: new TextStyle(
      color: Colors.white,
      fontFamily: 'GreatVibes',
      fontWeight: FontWeight.w700,
      fontSize: 16.0,
    )),
user_71308200

you may use it directly into widget style,or using Theme object which i prefer to control overall app from one location, here an example for main.dart:

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
      primarySwatch: Colors.purple,
      accentColor: Colors.deepOrange,
      **fontFamily: 'Lato'**),

 ....
  },
);
user_60093080
user_96635750
Related