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.