Custom fonts in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the custom font family in the Text widget.

Flutter

Text('Hello, Flutter!', style: TextStyle(fontFamily: '[1]'))

Drag options to blanks, or click blank then click option'

ACourierNew

BArial

CTimesNewRoman

DRoboto

Attempts:

3 left

💡 Hint

Common Mistakes

Using a system font name instead of the custom font family.

Misspelling the font family name.

The fontFamily property in TextStyle sets the font to use. 'Roboto' is the custom font declared in pubspec.yaml.

2fill in blank

medium

Complete the pubspec.yaml snippet to include the custom font file.

Flutter

fonts:
  - family: Roboto
    fonts:
      - asset: [1]

Drag options to blanks, or click blank then click option'

Aassets/fonts/Roboto-Regular.ttf

Blib/fonts/Roboto-Regular.ttf

Cfonts/Roboto-Regular.ttf

Dassets/Roboto-Regular.ttf

Attempts:

3 left

💡 Hint

Common Mistakes

Incorrect folder path for the font file.

Forgetting to add the font file under assets in pubspec.yaml.

The font file path must match where you placed the font file in your project folder, usually under assets/fonts/.

3fill in blank

hard

Fix the error in the pubspec.yaml font declaration by completing the missing key.

Flutter

flutter:
  fonts:
    - family: Roboto
      [1]:
        - asset: assets/fonts/Roboto-Regular.ttf

Drag options to blanks, or click blank then click option'

Afonts

Bassets

Cfiles

Dsources

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys like 'assets' or 'files' instead of 'fonts'.

Indentation errors in pubspec.yaml.

The key 'fonts' is required to list the font asset files under a family in pubspec.yaml.

4fill in blank

hard

Fill both blanks to apply the custom font and set font size in TextStyle.

Flutter

Text('Custom Font', style: TextStyle(fontFamily: '[1]', fontSize: [2]))

Drag options to blanks, or click blank then click option'

ARoboto

B24.0

C18.0

DArial

Attempts:

3 left

💡 Hint

Common Mistakes

Using a system font name instead of the custom font.

Using fontSize as a string instead of a number.

Use the custom font family 'Roboto' and set fontSize to 24.0 for larger text.

5fill in blank

hard

Fill all three blanks to declare a custom font with regular and bold styles in pubspec.yaml.

Flutter

fonts:
  - family: [1]
    fonts:
      - asset: [2]
      - asset: [3]
        weight: 700

Drag options to blanks, or click blank then click option'

ARoboto

Bassets/fonts/Roboto-Regular.ttf

Cassets/fonts/Roboto-Bold.ttf

Dassets/fonts/Roboto-Italic.ttf

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing font file paths or using wrong weights.

Forgetting to indent properly in pubspec.yaml.

This declares the 'Roboto' font family with regular and bold font files. The bold font has weight 700.