CODEWITHSUNDEEP
flutterdartfontsflutter-dependencies
qngson
qngson

Reputation: 13

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

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.

Upvotes: 1

Views: 222

Answers (1)

Texv
Texv

Reputation: 1869

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

Upvotes: 1

Related Questions