Configured font weights do not align with custom font

[Schoonology]

I have a typeface with multiple weights I want access to, and font files for each of these weights. I've configured pubspec.yaml with those weights, but they are not used when the identical FontWeight is used in a TextStyle.

pubspec:

  fonts:
    - family: Chivo
      fonts:
        - asset: assets/fonts/Chivo-Regular.ttf
        - asset: assets/fonts/Chivo-Italic.ttf
          style: italic
        - asset: assets/fonts/Chivo-Light.ttf
          weight: 200
        - asset: assets/fonts/Chivo-LightItalic.ttf
          weight: 200
          style: italic
        - asset: assets/fonts/Chivo-Bold.ttf
          weight: 700
        - asset: assets/fonts/Chivo-BoldItalic.ttf
          style: italic
          weight: 700
        - asset: assets/fonts/Chivo-Black.ttf
          weight: 900
        - asset: assets/fonts/Chivo-BlackItalic.ttf
          weight: 900
          style: italic

If I then used FontWeight.bold in a TextStyle, the 900 weight is used instead. This does not line up with the documentation on using custom fonts here: https://flutter.dev/docs/cookbook/design/fonts#pubspecyaml-option-definitions

Should the documentation be updated, or is this an issue that should be fixed in the framework?

There is a workaround: two fonts. I configured one font with the "common" weights (400/700), and a second with the "extreme" weights (200/900), treated as 400/700:

  fonts:
    - family: Chivo
      fonts:
        - asset: assets/fonts/Chivo-Regular.ttf
        - asset: assets/fonts/Chivo-Italic.ttf
          style: italic
        - asset: assets/fonts/Chivo-Bold.ttf
          weight: 700
        - asset: assets/fonts/Chivo-BoldItalic.ttf
          style: italic
          weight: 700
    - family: 'Chivo Extreme'
      fonts:
        - asset: assets/fonts/Chivo-Light.ttf
        - asset: assets/fonts/Chivo-LightItalic.ttf
          style: italic
        - asset: assets/fonts/Chivo-Black.ttf
          weight: 700
        - asset: assets/fonts/Chivo-BlackItalic.ttf
          weight: 700
          style: italic

[VladyslavBondarenko]

Hi @Schoonology
Could you provide your flutter doctor -v?

I'm using master channel and I'm not experiencing the issue with the code and changing number of FontWeight

code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Text(
          'some text',
          style: TextStyle(
            fontSize: 100,
            fontFamily: 'Chivo',
            fontWeight: FontWeight.w400
          ),
        ),
      ),
    );
  }
}

[Schoonology]

Flutter doctor output:

[✓] Flutter (Channel unknown, v1.12.13+hotfix.5, on Mac OS X 10.14.6 18G95, locale en-US)
    • Flutter version 1.12.13+hotfix.5 at /Users/schoon/Code/community/flutter
    • Framework revision 27321ebbad (8 weeks ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/schoon/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.8.3

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 40.2.2
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.41.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.0

[✓] Connected device (1 available)
    • Pixel 2 • FA7AL1A05970 • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

As far as the code you're using, @VladyslavBondarenko , the example I gave and the issue I'm having is for a MaterialApp with a custom font (i.e. fontFamily is set), multiple weights beyond 400/700 given, and a weight outside of 400/700 used.

To reiterate, I'm using a typeface with fonts provided for weights 200, 400, 700, and 900. If I configure 200 or 400 as the desired weight for text, the 400 weight is used instead. If I configure 700 as the desired weight for text, the 900 weight is used instead.

[VladyslavBondarenko]

@Schoonology
My bad, I missed tab before 'fonts:' group in pubspec.yaml, so the fonts were not loaded, so I saw default font (for which changing weight was working as intended) instead of Chivo. But now I see, It's not working indeed, even with the last stable or master

[jason-simmons]

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

The documentation should be updated to reflect this.

[adrianvintu]

Found explanation here

Font & style settings in pubspec are actually ignored: https://github.com/flutter/flutter/issues/36739#issuecomment-521806077

You need to check what weight is described in metadata inside Montserrat-Bold.ttf, perhaps it's not 700.

For displaying the metadata, you can use this site: https://fontdrop.info/, the font weight is displayed under Data/usWeightClass.

Redirected to flutter/website#3591 (comment)

[ghost]

Any way to force font to have a different weight ? For example this kind of font (https://blogfonts.com/orgon) appear like this :

[raekim]

Stumbled upon this issue while trying to wrap my head around custom font weight.

If the weight in pubsec.yaml is ignored, then what is the point of even defining it in the file? Is it only for descriptive purposes? Do I have to check metadata of all the custom fonts just to make sure? Seems counter-productive to me.

Hope someone has a good answer to this question.

[PeterDekkers]

I'd like to add to this that... Flutter forces weights to be multiples of 100, as you need to use the constants FontWeight.w100, FontWeight.w200 etc. to specify the weight of text.

One issue to take into account here is that the usWeightClass metadata entry in a font file allows for any value between 1 and 1000. Some fonts use e.g. 250 as a usWeightClass, and this would then preclude this weight from being used as part of a font family in Flutter, as there is no constant for it.

It would indeed be great if the weights from pubspec.yaml would take precedence over those in the font metadata, so that at least it's possible to override font files in order to make them work with Flutter. It would be in line with how CSS works also, a technology that many people will be familiar with.