Confusion to add custom fonts in flutter app

Question

I know how to add custom fonts in the app. But confusion in weight and style.

For Ex.

If I'm adding Montserrat font in the app and In my app's asset folder has is only Montserrat-Regular.ttf So in pubspec.yaml file I wrote.

 fonts:
    - family: Montserrat
      fonts:
        - asset: asset/fonts/Montserrat-Regular.ttf

And in the Text widgets I used all the 3 normal, bold and italic and it's working!!!

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is normal font',
              style: TextStyle(
                fontFamily: 'Montserrat',
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is bold font',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(height: 10),
            Text(
              'This is italic font',
              style: TextStyle(
                  fontFamily: 'Montserrat',
                fontStyle: FontStyle.italic
              ),
            ),
          ],
        )

So If regular font will work for bold and italic then in the Official tutorial Why adding

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

Raleway-Italic.ttf and RobotoMono-Bold.ttf ???? They should have add only regular fonts in asset and it could work I think?

And another things In my above code. if I set

• 1st Text "fontWeight: FontWeight.w300"
• 2st Text "fontWeight: FontWeight.w500"

I can not find any difference.

OR

if I set

• 1st Text "fontWeight: FontWeight.w600"
• 2st Text "fontWeight: FontWeight.w900"

I can not find any difference.

Why, one will explain me.

Solution

If you have a font with variants (diferents fonts from italic or Bold/Medium) you can define them in the same font family:

  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/roboto/Roboto-Black.ttf
          weight: 900
        - asset: assets/fonts/roboto/Roboto-BlackItalic.ttf
          style: italic
          weight: 900
        - asset: assets/fonts/roboto/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/roboto/Roboto-BoldItalic.ttf
          style: italic
          weight: 700
        - asset: assets/fonts/roboto/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/roboto/Roboto-Light.ttf
          weight: 300
        - asset: assets/fonts/roboto/Roboto-LightItalic.ttf
          style: italic
          weight: 300
        - asset: assets/fonts/roboto/Roboto-Medium.ttf
          weight: 500
        - asset: assets/fonts/roboto/Roboto-MediumItalic.ttf
          style: italic
          weight: 500
        - asset: assets/fonts/roboto/Roboto-Regular.ttf
        - asset: assets/fonts/roboto/Roboto-Thin.ttf
          weight: 100
        - asset: assets/fonts/roboto/Roboto-ThinItalic.ttf
          style: italic
          weight: 100

In my Roboto exemple:

If you use the font family Roboto and a text with default weight it will use the Roboto-Regular.ttf

But if you use the italic style it will use the Roboto-Italic.ttf

I have variations to BOLD, MEDIUM, THIN and each ITALIC form.

It makes the font be more polish than the font that were software styled...

In the pubspec.yaml file, you have fonts that can have one or more children - family that can have one or more children fonts (for variants that works exactly the way that works in css font-family: Arial, Helvetica, sans-serif;).

fonts can have one or more children of - asset and it can have weight and/or style as children or none.