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.
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:
app/pubspec.yaml
widgets/assets/fonts
to widgets/lib/fonts
-> necessary to the fonts be imported alongside the code source fileswidgets/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.