Font optimization in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro optimize font loading by default?

Astro automatically optimizes font loading to improve page speed. What is the default behavior of Astro regarding font optimization?

A Astro preloads fonts using <link rel="preload"> tags and uses font-display: swap.

B Astro disables font optimization by default and requires manual setup.

C Astro inlines all font files as base64 in the HTML to avoid extra requests.

D Astro converts fonts to SVG format for faster rendering.

💡 Hint

Think about how browsers prioritize font loading to avoid invisible text.

Astro preloads fonts with <link rel="preload"> and applies font-display: swap to ensure text is visible while fonts load, improving user experience.

📝 Syntax

intermediate

Which Astro config snippet correctly enables Google Fonts optimization?

Astro supports automatic Google Fonts optimization. Which config snippet correctly enables this feature?

A

export default {
  googleFonts: {
    enabled: true
  }
}

B

import { googleFonts } from '@astrojs/google-fonts';

export default {
  integrations: [
    googleFonts({ optimize: true })
  ]
}

C

export default {
  integrations: [
    googleFonts({ optimize: true })
  ]
}

D

export default {
  integrations: [
    GoogleFonts({ optimizeFonts: true })
  ]
}

💡 Hint

Look for correct capitalization and property names in the integration.

The correct integration uses googleFonts with the option optimize: true inside the integrations array.

🔧 Debug

advanced

Why does font optimization fail when using a custom font URL in Astro?

Consider this Astro component snippet that tries to optimize a custom font:

<link rel="stylesheet" href="https://example.com/fonts/custom-font.css" />

Font optimization does not work as expected. What is the most likely cause?

A Astro only optimizes fonts from Google Fonts by default, not custom URLs.

B The custom font URL must use HTTPS for optimization to work.

C The font CSS file must include <code>@font-face</code> rules with local sources.

D Astro requires the font files to be imported directly in the component for optimization.

💡 Hint

Think about which font sources Astro can optimize automatically.

Astro's built-in font optimization targets Google Fonts specifically. Custom font URLs are not automatically optimized and require manual handling.

🧠 Conceptual

advanced

What is the impact of using font-display: optional in Astro font optimization?

Astro allows configuring font-display behavior during font optimization. What happens if you set font-display: optional?

A The font is downloaded only if the user is on a fast network connection.

B The browser blocks rendering until the font is fully loaded, causing a delay.

C The font is always downloaded but never displayed to improve performance.

D The browser will use the fallback font immediately and may never swap to the custom font if slow.

💡 Hint

Consider how font-display: optional affects font swapping and fallback usage.

With font-display: optional, the browser shows fallback fonts immediately and may skip swapping to the custom font if it loads slowly, reducing layout shifts.

❓ state_output

expert

What is the rendered output when using Astro's font optimization with preload disabled?

Given this Astro component snippet:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<h1 class="font-roboto">Hello</h1>

If font optimization is enabled but preload is explicitly disabled, what will the browser behavior be?

A The font CSS is preloaded but the font files are not downloaded, causing invisible text.

B The font is inlined in the HTML, so no network requests occur for fonts.

C The font CSS is loaded normally without preload; text may show fallback font briefly before swapping.

D The font is blocked from loading, so only fallback fonts are used permanently.

💡 Hint

Think about what disabling preload means for font loading sequence.

Disabling preload means the font CSS and font files load normally without priority hints. The browser may show fallback fonts briefly before swapping to the custom font once loaded.

Practice

1. What is the main benefit of using font optimization in Astro projects?

easy

A. It makes the website load faster and improves user experience.

B. It changes the font color automatically.

C. It removes all fonts from the website.

D. It increases the file size of font files.

Solution

1. Step 1: Understand font optimization purpose

   Font optimization aims to improve website speed and smoothness by managing font loading efficiently.

2. Step 2: Identify the correct benefit

   Among the options, only making the website load faster and improving user experience matches the purpose.

3. Final Answer:

   It makes the website load faster and improves user experience. -> Option A

4. Quick Check:

   Font optimization = faster load and better UX [OK]

Hint: Font optimization improves speed and user experience [OK]

Common Mistakes:

• Thinking font optimization changes font colors
• Believing it removes fonts entirely
• Assuming it increases font file size

2. Which is the correct way to use Astro's Font helper to preload a font with display swap?

easy

A. Font.load('/fonts/myfont.woff2', { display: 'block' });

B. import { Font } from '@astrojs/font'; const myFont = Font({ src: '/fonts/myfont.woff2', display: 'swap', preload: true });

C. const myFont = Font('/fonts/myfont.woff2', { preload: false });

D. import Font from 'astro-font'; Font({ src: '/fonts/myfont.ttf' });

Solution

1. Step 1: Check correct import and usage

   Astro's Font helper is imported from '@astrojs/font' and called with an object including src, display, and preload keys.

2. Step 2: Verify options for preload and display

   import { Font } from '@astrojs/font'; const myFont = Font({ src: '/fonts/myfont.woff2', display: 'swap', preload: true }); correctly uses preload: true and display: 'swap' which matches best practices.

3. Final Answer:

   import { Font } from '@astrojs/font'; const myFont = Font({ src: '/fonts/myfont.woff2', display: 'swap', preload: true }); -> Option B

4. Quick Check:

   Correct import and preload with display swap = import { Font } from '@astrojs/font'; const myFont = Font({ src: '/fonts/myfont.woff2', display: 'swap', preload: true }); [OK]

Hint: Use import from '@astrojs/font' and set preload: true [OK]

Common Mistakes:

• Wrong import path or syntax
• Using display: 'block' instead of 'swap'
• Not setting preload to true

3. Given this Astro code snippet, what will be the effect on font loading?

import { Font } from '@astrojs/font';
const roboto = Font({ src: '/fonts/roboto.woff2', display: 'swap', preload: true });

export default function Page() {
  return <h1 style={{ fontFamily: roboto.style }}>Hello</h1>;
}

medium

A. The font will load but without any optimization or preload.

B. Roboto font is not preloaded and causes a flash of invisible text.

C. The font will not load because of a syntax error.

D. Roboto font is preloaded and swaps smoothly when loaded, improving page speed.

Solution

1. Step 1: Analyze the Font helper usage

   The font is imported with preload: true and display: 'swap', which preloads the font and allows fallback text until font loads.

2. Step 2: Understand the effect on rendering

   Using display: 'swap' avoids invisible text and preload speeds up font availability, improving page speed and user experience.

3. Final Answer:

   Roboto font is preloaded and swaps smoothly when loaded, improving page speed. -> Option D

4. Quick Check:

   Preload + display swap = smooth font load [OK]

Hint: Preload true + display swap = smooth font loading [OK]

Common Mistakes:

• Assuming no preload causes no flash
• Thinking syntax error exists here
• Ignoring display: 'swap' effect

4. Identify the error in this Astro font optimization code:

import { Font } from '@astrojs/font';
const openSans = Font({ src: '/fonts/opensans.woff2', display: 'fallback', preload: 'yes' });

medium

A. The preload option should be a boolean, not a string.

B. The display option 'fallback' is invalid in Astro.

C. The src path must end with .ttf, not .woff2.

D. Font helper must be called with a string, not an object.

Solution

1. Step 1: Check preload option type

   Preload expects a boolean (true or false), but 'yes' is a string, causing an error.

2. Step 2: Validate other options

   Display: 'fallback' is valid CSS font-display value, .woff2 is a valid font format, and Font helper accepts an object.

3. Final Answer:

   The preload option should be a boolean, not a string. -> Option A

4. Quick Check:

   Preload must be true/false, not 'yes' [OK]

Hint: Preload must be true or false, never a string [OK]

Common Mistakes:

• Using string 'yes' instead of boolean true
• Thinking .woff2 is invalid
• Assuming display: 'fallback' is wrong

5. You want to optimize loading two fonts in Astro: one for headings and one for body text. You want headings to preload and use display swap, but body text font should load lazily without preload. Which code correctly implements this?

hard

A. import Font from '@astrojs/font';
const headingFont = Font('/fonts/heading.woff2', { preload: true });
const bodyFont = Font('/fonts/body.woff2', { preload: false });

B. import { Font } from '@astrojs/font';
const headingFont = Font({ src: '/fonts/heading.woff2', display: 'block', preload: true });
const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: true });

C. import { Font } from '@astrojs/font';
const headingFont = Font({ src: '/fonts/heading.woff2', display: 'swap', preload: true });
const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: false });

D. import { Font } from '@astrojs/font';
const headingFont = Font({ src: '/fonts/heading.ttf', display: 'fallback', preload: false });
const bodyFont = Font({ src: '/fonts/body.ttf', display: 'swap', preload: true });

Solution

1. Step 1: Check heading font requirements

   Heading font must preload and use display: 'swap'.

   import { Font } from '@astrojs/font';
   const headingFont = Font({ src: '/fonts/heading.woff2', display: 'swap', preload: true });
   const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: false });

   sets preload: true and display: 'swap' correctly.

2. Step 2: Check body font requirements

   Body font should load lazily without preload, so preload: false and display: 'swap' is correct in

   import { Font } from '@astrojs/font';
   const headingFont = Font({ src: '/fonts/heading.woff2', display: 'swap', preload: true });
   const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: false });

   .

3. Step 3: Verify other options

   Other options either preload body font incorrectly, use wrong display values, or wrong import syntax.

4. Final Answer:

   import { Font } from '@astrojs/font';
   const headingFont = Font({ src: '/fonts/heading.woff2', display: 'swap', preload: true });
   const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: false });

   -> Option C

5. Quick Check:

   Preload headings true, body false with display swap =

   import { Font } from '@astrojs/font';
   const headingFont = Font({ src: '/fonts/heading.woff2', display: 'swap', preload: true });
   const bodyFont = Font({ src: '/fonts/body.woff2', display: 'swap', preload: false });

   [OK]

Hint: Preload headings true, body false; use display swap [OK]

Common Mistakes:

• Preloading body font when it should be lazy
• Using display: 'block' instead of 'swap'
• Incorrect import or function call syntax