Skip to content

feat(fonts): getFontBuffer() #13041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
florian-lefebvre wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(fonts): getFontBuffer() #13041

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions src/content/docs/en/reference/experimental-flags/fonts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,20 +385,11 @@ Variable weight font files will be preloaded if any weight within its range is r

## Accessing font data programmatically

The `getFontData()` function is intended for retrieving lower-level font family data programmatically, for example, in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes) or to generate your own meta tags.
The [`getFontData()`](#getfontdata) function is intended for retrieving lower-level font family data programmatically, for example, to generate your own meta tags.

### `getFontData()`
<p>
The [`getFontBuffer()`](#getfontbuffer) function can then be used on retrieved URLs to get font buffers, for example, in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes) to generate OpenGraph images using [satori](https://github.com/vercel/satori), combined with proper [formats](#formats) configuration:
Copy link
Member Author

@florian-lefebvre florian-lefebvre Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to mention formats when introducing this new option but forgot. Basically satori does not support woff2 so to use Astro fonts with it, you basically always need to set formats. I thought quickly mentioning here would be good


**Type:** `(cssVariable: CssVariable) => FontData[]`<br />
<Since v="5.14.0" />
</p>

Returns an array of `FontData` objects for the provided [`cssVariable`](#cssvariable-1), which contains `src`, `weight` and `style`.

The following example uses `getFontData()` to get the font buffer from the URL when using [satori](https://github.com/vercel/satori) to generate OpenGraph images:

```tsx title="src/pages/og.png.ts" "getFontData(\"--font-roboto\")" "data[0].src[0].url"
```tsx title="src/pages/og.png.tsx" {2} "getFontData(\"--font-roboto\")" "await getFontBuffer(data[0].src[0].url)"
import type{ APIRoute } from "astro"
import { getFontData } from "astro:assets"
import satori from "satori"
Expand All @@ -414,7 +405,7 @@ export const GET: APIRoute = (context) => {
fonts: [
{
name: "Roboto",
data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()),
data: await getFontBuffer(data[0].src[0].url),
weight: 400,
style: "normal",
},
Expand All @@ -426,6 +417,26 @@ export const GET: APIRoute = (context) => {
}
```

### `getFontData()`

<p>

**Type:** `(cssVariable: CssVariable) => FontData[]`<br />
<Since v="5.14.0" />
</p>

Returns an array of `FontData` objects for the provided [`cssVariable`](#cssvariable-1), which contains `src`, `weight` and `style`.

### `getFontBuffer()`

<p>

**Type:** `(url: string) => Promise<Buffer>`<br />
<Since v="5.16.11" />
Copy link
Member Author

@florian-lefebvre florian-lefebvre Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure what the version will be

</p>

Returns a buffer for the font file from a source URL returned by [`getFontData()`](#getfontdata).

## Font configuration reference

All properties of your fonts must be configured in the Astro config. Some properties are common to both remote and local fonts, and other properties are available depending on your chosen font provider.
Expand Down