Skip to content

Commit be38646

Browse files
feat(fonts): warn on invalid properties
1 parent b9773d3 commit be38646

1 file changed

Lines changed: 97 additions & 1 deletion

File tree

src/content/docs/en/reference/font-provider-reference.mdx

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -434,7 +434,7 @@ The preferred method for implementing a custom font provider is to export a func
434434
435435
### The font provider object
436436
437-
A `FontProvider` is an object containing required [`name`](#name) and [`resolveFont()`](#resolvefont) properties. It also has optional [`config`](#config), [`init()`](#init) and [`listFonts()`](#listfonts) properties available.
437+
A `FontProvider` is an object containing required [`name`](#name) and [`resolveFont()`](#resolvefont) properties. It also has optional [`config`](#config), [`init()`](#init), [`listFonts()`](#listfonts) and [`getFontProperties()`](#getfontproperties) properties available.
438438
439439
The `FontProvider` type accepts a generic for family [options](/en/reference/configuration-reference/#fontoptions).
440440
@@ -504,6 +504,93 @@ The project root, useful for resolving local files paths.
504504
505505
Optional callback, used to return the list of available font names.
506506
507+
#### `getFontProperties()`
508+
509+
<p>
510+
511+
**Type:** `(options: GetFontPropertiesOptions) => Awaitable<FontProperties | undefined>`<br />
512+
**Default:** `undefined`<br />
513+
<Since v="7.3.0" />
514+
</p>
515+
516+
Optional callback, used to return the properties a given font family actually supports. Astro compares the values [configured for the family](/en/reference/configuration-reference/#fontname) against these properties, and logs a warning when a provider cannot serve one of them (e.g. a weight that a family does not offer).
517+
518+
Return `undefined` when the family is unknown to your provider. Astro will then skip the check for that family.
519+
520+
```ts title="font-provider.ts" {6-11}
521+
import type { FontProvider } from "astro";
522+
523+
export function registryFontProvider(): FontProvider {
524+
return {
525+
name: "registry",
526+
getFontProperties: ({ familyName }) => ({
527+
weights: ["400", "700"],
528+
styles: ["normal", "italic"],
529+
subsets: ["latin"],
530+
formats: ["woff2"]
531+
}),
532+
// ...
533+
};
534+
}
535+
```
536+
537+
:::note
538+
Implementing this callback is currently optional, but it will be required in Astro 8.
539+
:::
540+
541+
##### `options.familyName`
542+
543+
<p>
544+
545+
**Type:** `string`<br />
546+
</p>
547+
548+
The font family name, as identified by your font provider.
549+
550+
##### The `FontProperties` object
551+
552+
The object returned by `getFontProperties()` describes what your provider can serve for the requested family. All of its properties are optional: any property you omit is understood as "this provider does not expose that information", not as "nothing is available".
553+
554+
##### `FontProperties.weights`
555+
556+
<p>
557+
558+
**Type:** `Array<string> | undefined`<br />
559+
**Default:** `undefined`<br />
560+
</p>
561+
562+
The [font weights](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) available for the font family. Values are either individual weights (e.g. `"400"`), or ranges of weights for [variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) written as `"<min> <max>"` (e.g. `"100 900"`).
563+
564+
##### `FontProperties.styles`
565+
566+
<p>
567+
568+
**Type:** `Array<("normal"|"italic"|"oblique")> | undefined`<br />
569+
**Default:** `undefined`<br />
570+
</p>
571+
572+
The [font styles](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) available for the font family.
573+
574+
##### `FontProperties.subsets`
575+
576+
<p>
577+
578+
**Type:** `Array<string> | undefined`<br />
579+
**Default:** `undefined`<br />
580+
</p>
581+
582+
The [font subsets](https://knaap.dev/posts/font-subsetting/) available for the font family.
583+
584+
##### `FontProperties.formats`
585+
586+
<p>
587+
588+
**Type:** `Array<("woff2"|"woff"|"otf"|"ttf"|"eot")> | undefined`<br />
589+
**Default:** `undefined`<br />
590+
</p>
591+
592+
The [font formats](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/src#font_formats) your provider can serve. This describes your provider's capabilities rather than a single family's, so some of these formats may not exist for every family.
593+
507594
### Supporting a private registry
508595
509596
The following example defines a font provider for a private registry:
@@ -701,6 +788,9 @@ export function acmeFontProvider(): FontProvider {
701788
async listFonts() {
702789
return await initializedProvider?.listFonts?.();
703790
},
791+
async getFontProperties({ familyName }) {
792+
return await initializedProvider?.getFontProperties?.(familyName);
793+
},
704794
};
705795
}
706796
```
@@ -729,6 +819,9 @@ export function acmeFontProvider(config?: AcmeOptions): FontProvider {
729819
async listFonts() {
730820
return await initializedProvider?.listFonts?.();
731821
},
822+
async getFontProperties({ familyName }) {
823+
return await initializedProvider?.getFontProperties?.(familyName);
824+
},
732825
};
733826
}
734827
```
@@ -756,6 +849,9 @@ export function acmeFontProvider(): FontProvider<AcmeFamilyOptions | undefined>
756849
async listFonts() {
757850
return await initializedProvider?.listFonts?.();
758851
},
852+
async getFontProperties({ familyName }) {
853+
return await initializedProvider?.getFontProperties?.(familyName);
854+
},
759855
};
760856
}
761857
```

0 commit comments

Comments
 (0)