Skip to content
Merged
28 changes: 27 additions & 1 deletion src/content/docs/en/reference/experimental-flags/fonts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ import { Font } from 'astro:assets';

<p>

**Type:** `boolean`<br />
**Type:** `boolean | { weight?: string | number; style?: string; subset?: string }[]`<br />
**Default:** `false`
</p>

Expand All @@ -325,6 +325,32 @@ import { Font } from 'astro:assets';
<Font cssVariable="--font-roboto" preload />
```

If not specified or set to `false`, no preload links will be emitted. If set to `true`, all possible links will be included.
Comment thread
florian-lefebvre marked this conversation as resolved.
Outdated

#### Granular preloads

<p>
<Since v="5.15.0" />
</p>

If you need more control over which font file is preloaded, you can instead provide an array of objects:
Comment thread
florian-lefebvre marked this conversation as resolved.
Outdated
Comment thread
florian-lefebvre marked this conversation as resolved.
Outdated

The following example will only preload font files with a `400` weight or a `normal` style in the `latin` subset:

```astro title="src/components/Head.astro" {7-10}
Comment thread
florian-lefebvre marked this conversation as resolved.
---
import { Font } from 'astro:assets';
---

<Font
cssVariable="--font-roboto"
preload={[
{ subset: 'latin', style: 'normal' },
{ weight: '400' },
]}
/>
```

Comment thread
florian-lefebvre marked this conversation as resolved.
## 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.
Expand Down
Loading