Search code examples
flutterflutter-packages

Use custom font in Flutter package


I have a project that has the following folders structure:

app/
widgets/

Where app holds the main flutter application and widgets is a flutter package that contains reusable components used by app and any other project that may want.

I'm trying to use a custom font in one of the widgets placed in widgets/ folder, but when I run app and try to use this widget, the font is not recognized and the Widget title doesn't appear (probably because the font is being incorrectly imported).

I haven't imported the font in app/pubspec.yaml (not sure if I should)

I added the custom font to widgets/assets/fonts folder and imported in widgets/pubspec.yaml like:

flutter:
  fonts:
    - family: <FONT_NAME>
      fonts:
        - asset: assets/fonts/<FILE>
          weight: 400

And I'm using this font in widgets/<WIDGET> like this:

final style = TextStyle(fontFamily: <FONT_NAME>, fontWeight: FontWeight.w600, ontSize: 48, height: 48);
....

What am I missing in this setup?

OBS: app/ is an web project, not sure if it makes any difference.


Solution

  • In my case, it ended up being a problem not related with the font importing...

    I was using height property from FontStyle in widgets/<WIDGET> as an absolute value instead a multiplier. E.g: using

    TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 48)
    

    instead of

    TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 1)
    

    So the font was being correctly imported, but it wasn't being rendered because the actual height of the font was 48 * 48 = 2304.

    The final setup to use widgets/ fonts in app/ was:

    • Removed the font import from app/pubspec.yaml
    • Moved the fonts from widgets/assets/fonts to widgets/lib/fonts -> necessary to the fonts be imported alongside the code source files
    • Updated widgets/pubspec.yaml to import the files from lib/fonts instead assets/fonts.

    Now, when importing widgets/ in app/pubspec.yaml the custom fonts are working as expected.