Font optimization in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Google font in Astro.

Astro

import [1] from '@astrojs/google-fonts';

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

AGoogleFonts

BGoogleFont

CFontGoogle

DFontsGoogle

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'GoogleFont' instead of plural.

Swapping the order of words in the import name.

The correct import is GoogleFonts from '@astrojs/google-fonts'.

2fill in blank

medium

Complete the code to add the Roboto font with weights 400 and 700.

Astro

<GoogleFonts fonts=[1] />

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

A{ roboto: ['400', '700'] }

B{ Roboto: [400, 700] }

C{ roboto: [400, 700] }

D{ roboto: 400, 700 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized font name key.

Passing weights as strings instead of numbers.

Not wrapping weights in an array.

The font name is lowercase roboto and weights are numbers in an array.

3fill in blank

hard

Fix the error in the font preload attribute to improve performance.

Astro

<GoogleFonts preload=[1] />

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

Atrue

B"true"

C"false"

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Passing preload as a string instead of boolean.

Using quotes around true or false.

The preload attribute expects a boolean true or false, not a string.

4fill in blank

hard

Fill both blanks to specify subsets and display strategy for font optimization.

Astro

<GoogleFonts fonts=[1] subsets=[2] />

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

A{ roboto: [400] }

B["latin"]

C["cyrillic"]

D{ openSans: [300, 600] }

Attempts:

3 left

💡 Hint

Common Mistakes

Using subsets as an object instead of an array.

Mixing font names and subsets in the same prop.

Use the font object for fonts and an array of subsets like ["latin"] for subsets.

5fill in blank

hard

Fill all three blanks to optimize font loading with display strategy and preload enabled.

Astro

<GoogleFonts fonts=[1] display=[2] preload=[3] />

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

A{ inter: [400, 700] }

B"swap"

Ctrue

D"block"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around boolean preload.

Passing display as a boolean instead of string.

Incorrect font object syntax.

Use the font object for fonts, a string like "swap" for display, and boolean true for preload.