Custom fonts in flutter

Flutter works with custom fonts and it can applied across an entire app or to an individual widget.

importing the font files

In order to apply custom fonts into a project we need to import the font files into the project, to use a custom font we add the font file into a fonts folder at the root of the flutter project.

The folder structure might look like this:

app/
fonts/
Roboto-Thin.ttf

Declare the font in the pubspec.ymal file

Once the font as be identified then we have to tell flutter were to find it. This can be done by including the font definition into the pubspec.yaml file.

pubspec.yaml option definitions

The family determines the name of the font, which can be used in the fontFamily property of a TextStyle object.

The asset is a path to the font file, relative to the pubspec.yaml file. These files contain the outlines for the glyphs in the font. When building the app, these files are included in the app’s asset bundle.

A single font can reference many different files with different outline weights and styles:

• The weight property specifies the weight of the outlines in the file as an integer multiple of 100, between 100 and 900.
• The style property specifies whether the outlines in the file are italic or normal.

Setting the font as default

There is two options one to add the custom font to a specific widget or to set it as default the entire app.

To use a font as the default, set the fontFamily property as part of the app’s theme. The value provided to fontFamily must match the family name declared in the pubspec.yaml.

to use the font in a specific widget, such as a Text widget, we provide a TextStyle to that Text widget.

This is how the application looked before using a custom font.

Now, after using a custom font, the application looked like this:

That’s it! you made it till the end. Thank you.