Home > Enterprise >  Flutter custom font only rendering two weights despite font metadata having the exact weight numbers
Flutter custom font only rendering two weights despite font metadata having the exact weight numbers

Time:12-20

My import in pubspec.yaml is standard enough. I do know that pubspec ignores the weight.

fonts:
  - family: Museo_Slab
    fonts:
      - asset: assets/fonts/Museo_Slab/Museo_Slab_100.otf
        weight: 100

      - asset: assets/fonts/Museo_Slab/Museo_Slab_300.otf
        weight: 300

      - asset: assets/fonts/Museo_Slab/Museo_Slab_500.otf
        weight: 500

      - asset: assets/fonts/Museo_Slab/Museo_Slab_700.otf
        weight: 700

      - asset: assets/fonts/Museo_Slab/Museo_Slab_900.otf
        weight: 900

The font metadata in FontBook shows the exact number of 100, 300, etc. When rendering:

Text(
  'Museo Slab 700',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
      fontFamily: 'Museo_Slab',
      fontWeight: FontWeight.w700,
      fontSize: 20,
      color: Colors.black),
),

Flutter picked only the first two weights and renders like this.

Not great screenshot

When it should be like this

Sanity screenshot

I have checked the font metadata and tried uninstalling and reinstalling the fonts, but I still am not seeing the correct weights.

CodePudding user response:

I am facing the same problem. The only fix i could find is to define the family individually:

- family: Museo_Slab100
  fonts:
    - asset: assets/fonts/Museo_Slab/Museo_Slab_100.otf

- family: Museo_Slab300
  fonts:
    - asset: assets/fonts/Museo_Slab/Museo_Slab_300.otf

- family: Museo_Slab500
  fonts:
    - asset: assets/fonts/Museo_Slab/Museo_Slab_500.otf

- family: Museo_Slab700
  fonts:
    - asset: assets/fonts/Museo_Slab/Museo_Slab_700.otf

- family: Museo_Slab900
  fonts:
    - asset: assets/fonts/Museo_Slab/Museo_Slab_900.otf

                        const Text(
                          'Museo Slab 100',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: 'Museo_Slab100',
                              fontSize: 20,
                              color: Colors.black),
                        ),
                        const Text(
                          'Museo Slab 300',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: 'Museo_Slab300',
                              fontSize: 20,
                              color: Colors.black),
                        ),
                        const Text(
                          'Museo Slab 500',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: 'Museo_Slab500',
                              fontSize: 20,
                              color: Colors.black),
                        ),
                        const Text(
                          'Museo Slab 700',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: 'Museo_Slab700',
                              fontSize: 20,
                              color: Colors.black),
                        ),
                        const Text(
                          'Museo Slab 900',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: 'Museo_Slab900',
                              fontSize: 20,
                              color: Colors.black),
                        ),
  • Related