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: 3fcdba0

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 (100cd48) with main (70c9595)}

Summary

✅ 6 untouched benchmarks

[sarah11918]

Reviewed the error messages as I'm not sure there's anything else in here for me right now.

(The changeset will be the last thing, when we're ready to H.Y.P.E.!)

[pkg-pr-new]

astro

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

@astrojs/cloudflare

npm i https://pkg.pr.new/@astrojs/cloudflare@12775

@astrojs/netlify

npm i https://pkg.pr.new/@astrojs/netlify@12775

@astrojs/node

npm i https://pkg.pr.new/@astrojs/node@12775

@astrojs/vercel

npm i https://pkg.pr.new/@astrojs/vercel@12775

commit: dc24bdd

[sarah11918]

Thanks for pointing these errors out! Left some thoughts for you! 🙌