Font optimization in Astro - Mini Project: Build & Apply

Font optimization

📖 Scenario: You are building a simple Astro website. You want to optimize font loading to improve page speed and user experience.

🎯 Goal: Learn how to set up font optimization in Astro by configuring font imports and using the built-in font optimization features.

📋 What You'll Learn

Create a basic Astro page with a heading

Add a font import configuration variable

Use Astro's font optimization to load the font

Apply the optimized font to the heading

💡 Why This Matters

🌍 Real World

Optimizing fonts in Astro projects helps websites load faster and look better on all devices.

💼 Career

Font optimization is a common task for frontend developers to improve user experience and SEO.

1

Create a basic Astro page

Create a new Astro component file and write a simple page with a <h1> heading that says Welcome to Astro.

Astro

Welcome to Astro

Hint

Use an <h1> tag with the exact text Welcome to Astro.

2

Add a font import configuration

Add a const variable named fontConfig that imports the Roboto font from @astrojs/font/google with weights 400 and 700.

Astro

import { Roboto } from '@astrojs/font/google';

Welcome to Astro

// Your code here

Hint

Use const fontConfig = Roboto({ weights: ['400', '700'] }) exactly.

3

Use Astro's font optimization

Add the fontConfig.style to the <style> tag inside the component to apply the optimized font styles.

Astro

import { Roboto } from '@astrojs/font/google';

const fontConfig = Roboto({ weights: ['400', '700'] });


  /* Add fontConfig.style here */


Welcome to Astro

// Your code here

Hint

Use {fontConfig.style} inside a <style> tag.

4

Apply the optimized font to the heading

Add a class attribute to the <h1> tag using {fontConfig.className} to apply the optimized font style.

Astro

import { Roboto } from '@astrojs/font/google';

const fontConfig = Roboto({ weights: ['400', '700'] });

{fontConfig.style}

Welcome to Astro

// Your code here

Hint

Add class={fontConfig.className} exactly to the <h1> tag.