24

I have added the font in pubspec.yaml Any True Type Font works just fine. But, when I add Open Type Font it doesn't work.

Here is my how I added font in pubspec.yaml

  fonts:
    - family: Kufyan
      fonts:
        - asset: assets/fonts/Kufyan.otf
Xihuny
  • 1,410
  • 4
  • 19
  • 48

6 Answers6

21

The flutter recent version v1.12.13 does not support the open type font(otf) directly. You have to convert the otf to true type font(ttf) somehow. You can use this third-party website to covert the font to ttf before using it in your project. You can refer to the guide on how to use custom fonts in flutter for more information.

Flutter matches the font family based on the metadata in the font itself. So defining family: Kufyan is not required in pubspec.yml

Note: OTF is now officially supported, see supported font types

Kiran Maniya
  • 8,453
  • 9
  • 58
  • 81
21

✔️ Officially works since 24 feb of 2021

Proofs

  1. Since this commit (GitHub) enter image description here

  2. Current docs state look here (Flutter docs) enter image description here

Kas Elvirov
  • 7,394
  • 4
  • 40
  • 62
6

Just tested with Futter 1.20 and looks like OTF fonts work as expected. I can't seem to find anything in the docs about what type of fonts Flutter supports.

Daniil
  • 141
  • 1
  • 11
4

The Flutter engine matches fonts within a family based on the metadata in the font itself.

(We should remove the style descriptors in pubspec.yaml now that they are obsolete).

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

Example can be seen here which you have done.

But otf is may not be supported. it can be because of google fonts.

If its still not working then...

There is a trick you can use which is to convert otf to ttf via a third party i.e. convertio etc.

Then you can use it as a normal font.

  • Import the font files.
  • Declare the font in the pubspec.
  • Set a font as the default.
  • Use a font in a specific widget.
Scaphae Studio
  • 503
  • 3
  • 3
2

The Flutter engine matches fonts within a family based on the metadata in the font itself, not the style descriptors declared in the pubspec.yaml manifest. (We should remove the style descriptors in pubspec.yaml now that they are obsolete).

The Edmondsans regular, 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.

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

prem v
  • 21
  • 4
1
  1. Convert otf font file in ttf font file using this platform. https://convertio.co/otf-ttf/
  2. Import the font files.
  3. Declare the font in the pubspec.
  4. Set a font as the default.
  5. Use a font in a specific widget.

Here is the example and steps to use custom font. https://www.xam-consulting.com/blog/adding-custom-fonts-in-flutter-application

Bhavik Nathani
  • 470
  • 5
  • 13