Why Font optimization in Astro? - Purpose & Use Cases

The Big Idea

Discover how smart font loading can make your website lightning fast and stunning!

The Scenario

Imagine building a website where you manually add large font files for every style and weight you want to use.

Each page load feels slow, and users get frustrated waiting for text to appear clearly.

The Problem

Manually managing fonts means loading big files even if only a few characters or styles are used.

This wastes bandwidth, slows down page loading, and hurts user experience.

The Solution

Font optimization automatically loads only the needed font styles and characters.

This makes pages load faster and look great without extra effort.

Before vs After

✗ Before

@font-face { font-family: 'MyFont'; src: url('MyFont-Regular.woff2'); } @font-face { font-family: 'MyFont'; src: url('MyFont-Bold.woff2'); font-weight: 700; }

✓ After

import { localFont } from 'astro/fonts'; const fonts = localFont({ src: [{ path: './MyFont-Regular.woff2', weight: '400' }, { path: './MyFont-Bold.woff2', weight: '700' }], subsets: ['latin'] });

What It Enables

It enables fast, beautiful websites that load only the fonts they truly need, improving user satisfaction.

Real Life Example

A news website uses font optimization to load only the regular and bold weights of its custom font for English readers, making pages load quickly worldwide.

Key Takeaways

Manual font loading wastes bandwidth and slows pages.

Font optimization loads only needed styles and characters.

This improves speed and user experience effortlessly.