In Flutter on adding custom font, FontWeight is not affecting the text

Question

image pubspec I want to set Noir Pro as the default font family for my flutter app.

Default Roboto fontFamily changes to NoirPro but the font weights e.g(.w400,w500,w600) are not working correctly . I'm unable to find any other online help. And this is getting me frustrated

In pubspec.yaml

fonts:
    - family: NoirPro
      fonts:
        - asset: resources/fonts/NoirPro_Light.ttf
          weight: 300
        - asset: resources/fonts/NoirPro_Normal.ttf
          weight: 400
        - asset: resources/fonts/NoirPro_Medium.ttf
          weight: 500
        - asset: resources/fonts/NoirPro_Bold.ttf
          weight: 700
        - asset: resources/fonts/NoirPro_Heavy.ttf
          weight: 800

In main.dart

 theme: ThemeData(
          fontFamily: 'NoirPro',
          canvasColor: Colors.white,
        ),

Answer 1

I have found the cause and its very trivial :

The Flutter matches fonts within a family based on the metadata in the font itself, not the style descriptors declared in the pubspec.yaml.

My NoirPro, medium, and bold fonts contain metadata declaring their weights as 400, 410, and 420 respectively. However, the Flutter text subsystem only supports font weight buckets representing even multiples of 100 (https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html). So all three of these fonts are mapped to FontWeight.w400, and the font style matcher can not choose between these fonts based on weight.

(you can check the metadata of your font files using this site: https://fontdrop.info/ )

Declaring these fonts as different families in pubspec.yaml will work around this.

Currently the requested weight is selected based on the weight metadata defined within the font itself. The weight in pubspec.yaml is ignored.

The documentation(cookbooks) should be updated to reflect this so it won't confuse other developers. Now my pubspec.yaml is :

fonts:
- family: NoirProNormal
  fonts:
    - asset: resources/fonts/NoirPro_Normal.ttf
- family: NoirProLight
  fonts:
    - asset: resources/fonts/NoirPro_Light.ttf
- family: NoirProMedium
  fonts:
    - asset: resources/fonts/NoirPro_Medium.ttf
- family: NoirProBold
  fonts:
    - asset: resources/fonts/NoirPro_Bold.ttf
- family: NoirProHeavy
  fonts:
    - asset: resources/fonts/NoirPro_Heavy.ttf

And when using text widget:

Text(
        "Hello World",
        style: TextStyle(
            fontSize: size.width * 0.075,
            fontFamily: "NoirProMedium",
            color: Colors.white)
      ),