Font from a package (library) not showing up in Flutter app?

Question

I have a package named Handwriter. It writes text in a custom font. I have the .ttf saved in lib/third_party/. In its pubspec.yaml, I add the font:

flutter:
    uses-material-design: true
    fonts:
     - family: FancyHandwriting
       fonts:
        - asset: lib/third_party/FancyHandwriting-Regular.ttf

My app imports this package. In its pubspec.yaml, I add Handwriter as a dependency:

dependencies:
  flutter:
    sdk: flutter
  handwriter:
    path: ../handwriter
  model:
    path: ../model

However, the font does not show up at all when I use it in my app. Why?

final defaultStyle = TextStyle(
      fontFamily: 'FancyHandwriting',
      fontSize: 130);

Solution 1

Without having to re-add the fonts in the package consumer app, you can use:

final defaultStyle = TextStyle(
  fontFamily: 'FancyHandwriting',
  package: 'handwriter',
  fontSize: 130,
);

Which is also equivalent to doing:

final defaultStyle = TextStyle(
  fontFamily: 'packages/handwriter/FancyHandwriting',
  fontSize: 130,
);

Solution 2

To use your Flutter Icon font from a custom package, you can follow these steps:

create a flutter icon font

You can use flutter icon for that https://www.fluttericon.com

Put the file into your package

Make sure to copy the .ttf file into of the /lib folder. NOT just assets, as you would do in your root project.

Example path:

/packages/my_awesome_fontpackage/lib/assets/MyIconFont.ttf

(see https://zubairehman.medium.com/how-to-use-custom-fonts-images-in-flutter-package-c2d9d4bfd47a )

Add the font to your project

Now open your package's pubspec.yaml file and add the font as an asset with package path:

flutter:
  fonts:
  - family:  MyIconFont
    fonts:
      - asset: packages/my_awesome_fontpackage/assets/MyIconFont.ttf

(you might have to restart your app and bundling completely for the font to be loaded correctly)

Now add package declaration to font dart file

Go into the my_icon_font.dart file and change the constant _kFontPkg there to your package name.

class MyIconFont {
  MyIconFont._();

  static const _kFontFam = 'MyIconFont';
  static const String? _kFontPkg = 'my_awesome_fontpackage';

  static const IconData bell = ...
  ....
}

Solution 3

According to this: https://flutter.dev/docs/cookbook/design/package-fonts you have to declare the package's font in your app's pubspec.yaml:

Declare the font assets Now that you’ve imported the package, tell Flutter where to find the fonts from the awesome_package.

To declare package fonts, prefix the path to the font with packages/awesome_package. This tells Flutter to look in the lib folder of the package for the font.

I.e.:

dependencies:
  flutter:
    sdk: flutter
  handwriter:
    path: ../handwriter
  model:
    path: ../model

flutter:
    uses-material-design: true
    fonts:
     - family: FancyHandwriting
       fonts:
        - asset: packages/handwriter/third_party/FancyHandwriting-Regular.ttf

Note you're declaring the asset as being from the package - you don't have to make a copy of it in your app's lib.

The reasoning behind this is that not all fonts from every package may be used, so this trims down your final app's size.