Custom fonts in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet using a custom font?

Given the following Flutter widget, what font family will the displayed text use?

Flutter

Text('Hello Flutter', style: TextStyle(fontFamily: 'MyCustomFont'))

A The text uses the system default font.

B The text will not display because 'MyCustomFont' is not a valid font family name.

C The text uses the 'MyCustomFont' font family if properly registered.

D The text uses a random font from the device.

💡 Hint

Custom fonts must be registered in the pubspec.yaml file before use.

If the font family is registered correctly in pubspec.yaml, Flutter uses it for the text style.

📝 Syntax

intermediate

Which pubspec.yaml snippet correctly registers a custom font named 'MyCustomFont'?

Choose the correct way to declare a custom font in pubspec.yaml.

A

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: fonts/MyCustomFont.ttf

B

flutter:
  assets:
    - fonts/MyCustomFont.ttf

C

fonts:
  - family: MyCustomFont
    asset: fonts/MyCustomFont.ttf

D

flutter:
  fonts:
    - family: MyCustomFont
      asset: fonts/MyCustomFont.ttf

💡 Hint

Look for the correct indentation and keys under flutter.

The correct syntax uses 'fonts' under 'flutter', with 'family' and a list of 'fonts' assets.

❓ lifecycle

advanced

What happens if you add a new font asset but forget to run 'flutter pub get' before running the app?

Consider you added a new font file and updated pubspec.yaml but did not run 'flutter pub get'. What will happen when you run the app?

A The app will display the new font correctly without any issues.

B The app will use the default font instead of the new custom font.

C The app will crash immediately on startup.

D The app will show a compile-time error.

💡 Hint

Think about how Flutter updates dependencies and assets.

Without running 'flutter pub get', the new font asset is not registered, so Flutter falls back to the default font.

🔧 Debug

advanced

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

Given this pubspec.yaml snippet and Flutter code, why does the custom font not appear?

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: fonts/MyFont-Regular.ttf

Text('Sample', style: TextStyle(fontFamily: 'MyCustomFont'))

A The Text widget does not support custom fonts.

B The font asset path is incorrect in pubspec.yaml.

C The font file is missing from the fonts folder.

D The font family name in TextStyle does not match the one declared in pubspec.yaml.

💡 Hint

Check the font family names carefully.

The TextStyle uses 'MyCustomFont' but the pubspec.yaml declares 'MyFont'. They must match exactly.

🧠 Conceptual

expert

How does Flutter handle font weight variations in custom fonts?

You have multiple font files for different weights (e.g., Regular, Bold) under the same family. How should you declare them in pubspec.yaml to enable Flutter to use them automatically?

A Declare each font file under the same family with the 'weight' property specifying the font weight.

B Declare only the Regular font file; Flutter will simulate other weights automatically.

C Flutter does not support multiple weights for custom fonts.

D Declare each font file under different family names for each weight.

💡 Hint

Look for how pubspec.yaml supports font weight declarations.

Flutter uses the 'weight' property to map font files to font weights under the same family.