6

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);
Mary
  • 18,347
  • 23
  • 59
  • 76

4 Answers4

6

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,
);
Paul Popiel
  • 930
  • 11
  • 21
3

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 = ...
  ....
}
SimonEritsch
  • 1,047
  • 1
  • 8
  • 22
1

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.

Mary
  • 18,347
  • 23
  • 59
  • 76
0

Don't forget that you must also import/copy the fonts into your font assets directory. In your case make sure you place them in lib/third_party/. (See step 1 - https://flutter.dev/docs/cookbook/design/fonts).

Oprimus
  • 1,652
  • 3
  • 11
  • 20