feat(fonts): experimental release

[florian-lefebvre]

API bash

Thanks for trying the experimental fonts API. Here's how to get set up.

Helpful resources

• Work in progress documentation
• Stage 3 RFC

Setup

Create a project as normal, or use an existing one:

npm create astro@latest

Install the experimental astro release:

npm i https://pkg.pr.new/astro@12775

Configure fonts:

// astro.config.mjs
// @ts-check
import { defineConfig } from 'astro/config'

export default defineConfig({
    experimental: {
        fonts: {
            families: ['Roboto']
        }
    }
})

Usage

Use the Font component and the generated CSS variable:

---
import { Font } from 'astro:assets'
---

<Font family='Roboto' preload />

<style>
body {
    font-family: var(--astro-font-roboto);
}
</style>

What to test

• Specifying some font options
• Use another font provider
• Use the local font provider
• Test in dev and build

---

Changes

• Adds first party support for fonts
• For details, check all the PRs merged into this branch (linked in commit messages)

Testing

Manual and automated

Docs

• feat: experimental fonts docs#11302
• changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: 4ee7308

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

This PR is blocked because it contains a minor changeset. A reviewer will merge this at the next release if approved.

[codspeed-hq]

CodSpeed Performance Report

Merging #12775 will not alter performance

_{Comparing feat/fonts (4ee7308) with main (762cc7f)}

Summary

✅ 6 untouched benchmarks

[sarah11918]

Just adding a block for the changeset, which will wait until docs are finalized! 🙌

[ematipico]

I already reviewed all the code in the previous PRs. I also did a rebase and resolved the conflicts. The project builds successfully!

There's a changeset now

Merge day

[sarah11918]

Let's goooo! 🥳