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,
        ),

Washwoman

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)
      ),

Washwoman

Ah, that's interesting. Thanks for pointing out! – Pipeline

Which metadata property is the font weight? Is it the usWeightClass? – Baty

It is mental(!) that this works. What a stupid little trivia we got to ourselves. It is not mentioned anywhere else even after 3 years. So, kudos to you my man, for finding it out! – Cyte

Answer 2

Try defining the family name without an empty space

- family: NoirPro

Pipeline

i have already tried this, but it doesn't work this way either – Washwoman

Answer 3

Try defining without the empty space - family: NoirPro And also you will need to provide the weight you want in the text widget

Text(
    "Hello",
    style: TextStyle(
        fontWeight: FontWeight.w400
    ),
)

Basra

i have did it already, tried the family name without space and ofcourse i'm providing the fontweight in Text widget. the issue is its either sets font weight to regular or bold not the other weights – Washwoman