Custom fonts in Flutter - Mini App: Build & Ship

Build: Custom Fonts Demo

This screen shows text using a custom font loaded into the app.

Target UI

-------------------------
| Custom Fonts Demo     |
|-----------------------|
|                       |
|  Hello in Custom Font  |
|                       |
|-----------------------|

Add a custom font to the Flutter project

Use the custom font for the main text on the screen

Display a title in the app bar

Center the text vertically and horizontally

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts Demo',
      home: const CustomFontScreen(),
    );
  }
}

class CustomFontScreen extends StatelessWidget {
  const CustomFontScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Fonts Demo'),
      ),
      body: const Center(
        // TODO: Add Text widget here using custom font
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts Demo',
      theme: ThemeData(
        fontFamily: 'Lobster',
      ),
      home: const CustomFontScreen(),
    );
  }
}

class CustomFontScreen extends StatelessWidget {
  const CustomFontScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Fonts Demo'),
      ),
      body: const Center(
        child: Text(
          'Hello in Custom Font',
          style: TextStyle(fontSize: 28),
        ),
      ),
    );
  }
}

/*
Additional steps outside this code:
1. Add font files (e.g., Lobster-Regular.ttf) into assets/fonts/
2. Update pubspec.yaml:

flutter:
  fonts:
    - family: Lobster
      fonts:
        - asset: assets/fonts/Lobster-Regular.ttf

This setup makes the font family 'Lobster' available to use in the app.
*/

We added a custom font named 'Lobster' to the Flutter app by placing the font file in the assets folder and configuring pubspec.yaml. Then, we set the app's theme fontFamily to 'Lobster' so all text uses it by default. The main text on the screen uses this font and is centered with a larger font size for visibility.

This approach shows how to load and use custom fonts in Flutter, making your app's text look unique and styled.

Final Result

Completed Screen

-------------------------
| Custom Fonts Demo     |
|-----------------------|
|                       |
|  Hello in Custom Font  |
|                       |
|-----------------------|

The app bar shows the title 'Custom Fonts Demo'.

The text 'Hello in Custom Font' is centered on the screen using the custom font style.

No other interactions on this screen.

Stretch Goal

Add a button that changes the text color when pressed.

💡 Hint

Use a StatefulWidget and update the Text widget's style color inside setState.

Practice

1. What is the first step to use a custom font in a Flutter app?

easy

A. Add the font files to the assets folder and declare them in pubspec.yaml

B. Write the font name directly in the Text widget

C. Import a font package from pub.dev

D. Use the default system font without changes

Solution

1. Step 1: Add font files to assets

   You must first place your font files (like .ttf) inside an assets folder in your project.

2. Step 2: Declare fonts in pubspec.yaml

   Next, you declare these font files under the fonts section in pubspec.yaml so Flutter knows about them.

3. Final Answer:

   Add the font files to the assets folder and declare them in pubspec.yaml -> Option A

4. Quick Check:

   Custom fonts start with assets + pubspec.yaml declaration [OK]

Hint: Always start by adding font files and declaring in pubspec.yaml [OK]

Common Mistakes:

• Skipping pubspec.yaml declaration
• Trying to use font without adding files
• Using font name without quotes in TextStyle

2. Which of the following is the correct way to specify a custom font family in a Text widget's style?

easy

A. Text('Hello', style: TextStyle(fontStyle: 'MyFont'))

B. Text('Hello', style: TextStyle(font: 'MyFont'))

C. Text('Hello', style: TextStyle(fontName: 'MyFont'))

D. Text('Hello', style: TextStyle(fontFamily: 'MyFont'))

Solution

1. Step 1: Use fontFamily property in TextStyle

   The correct property to set a font family is fontFamily, not font, fontName, or fontStyle.

2. Step 2: Apply fontFamily in Text widget

   Use TextStyle(fontFamily: 'YourFontName') inside the style parameter of Text widget.

3. Final Answer:

   Text('Hello', style: TextStyle(fontFamily: 'MyFont')) -> Option D

4. Quick Check:

   fontFamily property sets custom font [OK]

Hint: Use fontFamily property inside TextStyle for custom fonts [OK]

Common Mistakes:

• Using font instead of fontFamily
• Confusing fontStyle with fontFamily
• Omitting quotes around font family name

3. Given this pubspec.yaml snippet:

fonts:
  - family: CoolFont
    fonts:
      - asset: assets/fonts/CoolFont-Regular.ttf
      - asset: assets/fonts/CoolFont-Bold.ttf
        weight: 700

What will this code display?

Text('Hi', style: TextStyle(fontFamily: 'CoolFont', fontWeight: FontWeight.bold))

medium

A. Text 'Hi' in CoolFont Bold style

B. Text 'Hi' in default font because fontWeight is ignored

C. Error because fontWeight 700 is invalid

D. Text 'Hi' in CoolFont Regular style ignoring bold

Solution

1. Step 1: Understand fontWeight mapping

   The pubspec.yaml declares two font assets: Regular (default weight) and Bold (weight 700).

2. Step 2: TextStyle uses fontWeight.bold

   Using fontWeight: FontWeight.bold matches weight 700, so Flutter uses the Bold font file.

3. Final Answer:

   Text 'Hi' in CoolFont Bold style -> Option A

4. Quick Check:

   fontWeight matches declared font weight for bold [OK]

Hint: Match fontWeight in TextStyle to declared font weights in pubspec.yaml [OK]

Common Mistakes:

• Ignoring fontWeight and expecting bold
• Assuming fontWeight 700 is invalid
• Not declaring font weights in pubspec.yaml

4. Why does this Flutter app fail to apply the custom font?

pubspec.yaml:
fonts:
  - family: FancyFont
    fonts:
      - asset: assets/fonts/FancyFont.ttf

Dart code:
Text('Hello', style: TextStyle(fontFamily: 'FancyFontt'))

medium

A. pubspec.yaml syntax error due to missing indentation

B. Font file is missing from assets folder

C. Font family name in TextStyle does not match pubspec.yaml

D. Text widget cannot use custom fonts

Solution

1. Step 1: Check fontFamily spelling in Dart code

   The Dart code uses 'FancyFontt' but pubspec.yaml declares 'FancyFont' (extra 't').

2. Step 2: Font family names must match exactly

   Font family names are case-sensitive and must match exactly between pubspec.yaml and Dart code.

3. Final Answer:

   Font family name in TextStyle does not match pubspec.yaml -> Option C

4. Quick Check:

   Font family names must match exactly [OK]

Hint: Check spelling of fontFamily matches pubspec.yaml exactly [OK]

Common Mistakes:

• Typos in font family names
• Forgetting to run flutter pub get after changes
• Incorrect indentation in pubspec.yaml

5. You want to use two different custom fonts in your Flutter app: 'Lobster' for titles and 'OpenSans' for body text. How should you organize your pubspec.yaml and Dart code to achieve this?

hard

A. Add both font files but use only one family name in pubspec.yaml

B. Declare both fonts under fonts in pubspec.yaml with different family names, then use fontFamily: 'Lobster' or 'OpenSans' in TextStyle accordingly

C. Declare only one font in pubspec.yaml and switch fontFamily names in Dart code

D. Use system fonts for titles and custom font for body text without declaring both

Solution

1. Step 1: Declare each font family separately in pubspec.yaml

   You must list each font family with its own name and font files under the fonts section.

2. Step 2: Use fontFamily property in Dart code for each Text widget

   Apply fontFamily: 'Lobster' for titles and fontFamily: 'OpenSans' for body text in TextStyle.

3. Final Answer:

   Declare both fonts under fonts in pubspec.yaml with different family names, then use fontFamily: 'Lobster' or 'OpenSans' in TextStyle accordingly -> Option B

4. Quick Check:

   Multiple fonts need separate declarations and usage [OK]

Hint: Declare each font family separately and use fontFamily accordingly [OK]

Common Mistakes:

• Declaring only one font family for multiple fonts
• Using wrong fontFamily names in Dart code
• Not adding all font files to assets