Font optimization in Astro - Step-by-Step Execution

Concept Flow - Font optimization

Start Astro Project

↓

Add font link or import

↓

Configure font loading strategy

↓

Use font in CSS or components

↓

Build Astro site

↓

Check font files optimized & loaded

↓

Site renders with optimized fonts

This flow shows how Astro projects add and optimize fonts by importing, configuring loading, and building the site to deliver optimized font files.

Execution Sample

Astro

import { Font } from '@astrojs/font';

const myFont = Font({
  src: './fonts/MyFont.woff2',
  preload: true,
  display: 'swap'
});

This code imports a font in Astro, sets it to preload, and uses the 'swap' display strategy for better font loading.

Execution Table

Step	Action	Font State	Result
1	Import Font module	No font loaded	Font module ready
2	Define font with src './fonts/MyFont.woff2'	Font source set	Font file linked
3	Set preload: true	Font marked for preload	Browser will preload font
4	Set display: 'swap'	Font display strategy set	Text shows fallback then swaps
5	Build Astro site	Font optimized and included	Optimized font files generated
6	Site loads in browser	Font preloaded and swapped	Text renders quickly with font
7	End	Font optimization complete	Site uses optimized font

💡 Font is fully loaded and optimized after site build and browser load

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
myFont	undefined	src='./fonts/MyFont.woff2'	preload=true	display='swap'	optimized font included	ready for use in site

Key Moments - 3 Insights

Why do we set preload to true for the font?

Setting preload to true tells the browser to start loading the font early, improving page load speed as shown in execution_table step 3.

What does the 'swap' display strategy do?

The 'swap' strategy shows fallback text immediately, then swaps to the custom font once loaded, preventing invisible text (see step 4 in execution_table).

When is the font actually optimized and included in the site?

During the build step (step 5), Astro processes and optimizes the font files for best performance.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the font marked to preload?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Font State' column for 'Font marked for preload' in execution_table

According to variable_tracker, what is the value of 'myFont' after step 4?

A undefined

B src='./fonts/MyFont.woff2' and preload=true

C src='./fonts/MyFont.woff2', preload=true, display='swap'

D optimized font included

💡 Hint

Look at the 'After Step 4' column for 'myFont' in variable_tracker

If we remove 'preload: true', what would change in the execution_table?

A Step 3 would say 'Font not marked for preload' and loading might be slower

B Step 4 would change display strategy

C Step 5 would not optimize font

D No change at all

💡 Hint

Refer to step 3 in execution_table about preload effect

Concept Snapshot

Font optimization in Astro:
- Import font with @astrojs/font
- Set src to font file path
- Use preload: true to load early
- Use display: 'swap' for quick text rendering
- Build site to optimize fonts
- Result: faster, better font loading

Full Transcript

Font optimization in Astro involves importing fonts using the @astrojs/font package, specifying the font file source, and configuring loading strategies like preload and display swap. Preloading helps the browser start loading fonts early, improving page speed. The display swap strategy shows fallback text immediately and swaps to the custom font once loaded, avoiding invisible text. During the build process, Astro optimizes font files for best performance. This process ensures the site loads fonts efficiently and renders text quickly with the chosen font.

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