Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Working with Assets  ›  Lesson

Fonts

Fonts 12 minCustom fonts are declared in pubspec.yaml as a family with one file per weight or style, and applied through fontFamily in a TextStyle or in the app theme.

Fonts

Sprout's designer picked a friendly rounded typeface and sent two files: a regular and a bold. Dropping them into the project is not enough. Flutter needs to know that both files belong to one family, and which one is the bold.

The rule

One family, one file per weight, one name in the theme.

flutter:
  fonts:
    - family: Nunito
      fonts:
        - asset: fonts/Nunito-Regular.ttf
        - asset: fonts/Nunito-Bold.ttf
          weight: 700
        - asset: fonts/Nunito-Italic.ttf
          style: italic
  • family is the name your code will use. It does not have to match the file names.
  • Each file is one variation. weight is a number from 100 to 900 in steps of 100 (400 is regular, 700 is bold). style: italic marks an italic file.
  • A file with no weight counts as regular (400).

Apply it to one piece of text:

Text('Sprout', style: TextStyle(fontFamily: 'Nunito', fontWeight: FontWeight.bold))

or, far more often, to the whole app:

MaterialApp(theme: ThemeData(fontFamily: 'Nunito'), home: const SproutHome())

When a Text asks for FontWeight.bold, Flutter looks in the Nunito family for the file declared with weight 700. If there is none, it uses the closest weight it has, and bold may look faked or not bold at all.

An alternative is the google_fonts package, which fetches fonts by name at run time or bundles them. Declaring files yourself keeps everything offline and under your control.

The shortcut

Map every file to a weight number before you write any YAML.

Mapping the designer's filesStep 1 of 4

  1. List the files

    Nunito-Regular.ttf, Nunito-Bold.ttf, Nunito-Italic.ttf.

The trap is declaring each file as its own family, like NunitoBold. Then FontWeight.bold on Nunito cannot find the bold file, and you end up switching family names by hand.

Drills

Answer fast — trust the rule.

quick drill

Which weight number means bold?

quick drill

A font file under a family has no weight line. What weight is it treated as?

quick drill

Best way to make every screen in Sprout use Nunito?

quick drill

The bold file was declared as a separate family NunitoBold. What does TextStyle(fontFamily: 'Nunito', fontWeight: FontWeight.bold) use?

Remember

  • One family, one file per weight, one name in the theme.
  • Map each file to a weight number (400, 700) or style: italic first.
  • Trap: splitting weights into separate families.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainGive Sprout its typeface

Sprout's designer sends Nunito-Regular.ttf and Nunito-Bold.ttf. Write the pubspec.yaml entry, show how to make the whole app use Nunito, and explain what happens when a Text asks for bold if the bold file is not declared with its weight.