diff --git a/src/content/docs/en/reference/experimental-flags/fonts.mdx b/src/content/docs/en/reference/experimental-flags/fonts.mdx index f7ea7faef594d..092424d45a3f1 100644 --- a/src/content/docs/en/reference/experimental-flags/fonts.mdx +++ b/src/content/docs/en/reference/experimental-flags/fonts.mdx @@ -311,7 +311,7 @@ import { Font } from 'astro:assets';

-**Type:** `boolean`
+**Type:** `boolean | { weight?: string | number; style?: string; subset?: string }[]`
**Default:** `false`

@@ -325,6 +325,36 @@ import { Font } from 'astro:assets'; ``` +With the `preload` directive, the browser will immediately begin downloading all possible font links during page load. + +#### Granular preloads + +

+ +

+ +You may not always want to preload every font link, as this can block loading other important resources or may download fonts that are not needed for the current page. + +To selectively control which font files are preloaded, you can provide an array of objects describing any combination of font `weight`, `style`, or `subset` to preload. + +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} +--- +import { Font } from 'astro:assets'; +--- + + +``` + +Variable weight font files will be preloaded if any weight within its range is requested. For example, a font file for font weight `100 900` will be included when `400` is specified in a `preload` object. + ## 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.