API des polices expérimentale

Type : FontFamily[]

Ajouté à la version : astro@5.7.0

Cette fonctionnalité expérimentale vous permet d’utiliser des polices de votre système de fichiers et de divers fournisseurs de polices (par exemple Google, Fontsource, Bunny) via une API unifiée, entièrement personnalisable et assurant la sûreté du typage.

Les polices web peuvent impacter les performances des pages, aussi bien au moment du chargement qu’au moment du rendu. Cette API vous aide à maintenir les performances de votre site grâce à des optimisations automatiques des polices web notamment des liens de préchargement, des solutions de repli optimisées et des valeurs par défaut opiniâtres. Voir des exemples d’utilisation courante.

L’API des polices se concentre sur les performances et la confidentialité en téléchargeant et en mettant en cache les polices afin qu’elles soient diffusées depuis votre site. Cela peut éviter d’envoyer des données utilisateur à des sites tiers et garantit également qu’un ensemble cohérent de polices est disponible pour tous vos visiteurs.

Pour activer cette fonctionnalité, configurez un objet experimental.fonts avec au moins une police :

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto"
        }]
    }
});

Ensuite, ajoutez le composant <Font /> et le style à l’échelle du site dans votre <head> :

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />

<style>
body {
    font-family: var(--font-roboto);
}
</style>

Utilisation

experimental.fonts accepte un tableau d’objets de police. Pour chaque police, vous devez spécifier un fournisseur (provider), un nom de la famille (name) et définir une variable CSS (cssVariable) pour référencer votre police.
- provider : Vous pouvez choisir parmi la liste des fournisseurs intégrés ou créer votre propre fournisseur de polices personnalisé.
- name : Choisissez une famille de polices prise en charge par votre fournisseur.
- cssVariable : Doit être un identifiant valide sous la forme d’une variable CSS.
L’exemple suivant configure la famille « Roboto » depuis Google Fonts :
astro.config.mjs
```
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [{
      provider: fontProviders.google(),
      name: "Roboto",
      cssVariable: "--font-roboto"
    }]
  }
});
```
Plus d’options de configuration, telles que la définition de familles de polices de repli ainsi que les graisses (weights), styles, subsets et formats à télécharger, sont disponibles et certaines dépendront du fournisseur choisi.

Consultez la référence de configuration complète pour en savoir plus.
Appliquez des styles à l’aide du composant <Font />. Il doit être importé et ajouté au <head> de votre page. La fourniture de la variable CSS de la police est obligatoire, et vous pouvez éventuellement générer les liens de préchargement :
src/components/Head.astro
```
---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />
```
Cela se fait généralement dans un composant tel que Head.astro qui est utilisé dans une mise en page de site courante.

Consultez la référence complète du composant <Font> pour plus d’informations.

Étant donné que le composant <Font /> génère du CSS avec des déclarations de polices, vous pouvez faire référence à la famille de polices à l’aide de cssVariable :
<style> body { font-family: var(--font-roboto); } </style>
src/styles/global.css
@import "tailwindcss"; @theme inline { --font-sans: var(--font-roboto); }
tailwind.config.mjs
/** @type {import("tailwindcss").Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: {}, fontFamily: { sans: ["var(--font-roboto)"] } }, plugins: [] };

Fournisseurs de polices disponibles

Les polices sont chargées via un fournisseur qui télécharge les fichiers de police depuis un service distant ou charge les fichiers locaux depuis le disque. Astro exporte des fournisseurs intégrés pour les services courants. Vous pouvez également créer un fournisseur de polices Astro personnalisé.

Pour utiliser un fournisseur de polices intégré, importez fontProviders et configurez provider avec la valeur appropriée pour le fournisseur de polices que vous avez choisi :

import { fontProviders } from "astro/config";

Adobe
Bunny
Fontshare
Fontsource
Google
Google Icons
Local

Adobe

Récupère les polices de caractères depuis Adobe :

provider: fontProviders.adobe({ id: "votre-id" })

Transmettez au fournisseur de polices Adobe un ID chargé en tant que variable d’environnement dans votre fichier de configuration Astro.

Bunny

Récupère les polices depuis Bunny:

provider: fontProviders.bunny()

Fontshare

Récupère les polices depuis Fontshare:

provider: fontProviders.fontshare()

Fontsource

Récupère les polices depuis Fontsource:

provider: fontProviders.fontsource()

Google

Récupère les polices depuis Google:

provider: fontProviders.google()

Le fournisseur propose des options spécifiques à la famille.

experimental.glyphs

Type : string[]

Permet de spécifier une liste de glyphes à inclure dans la police pour chaque famille de polices. Cela peut réduire la taille du fichier de police :

{
  // ...
  provider: fontProviders.google(),
  options: {
    experimental: {
      glyphs: ["a"]
    }
  }
}

experimental.variableAxis

Type : Partial<Record<VariableAxis, ([string, string] | string)[]>>

Permet de configurer les axes de variation :

{
  // ...
  provider: fontProviders.google(),
  options: {
    experimental: {
      variableAxis: {
        slnt: [["-15", "0"]],
        CASL: [["0", "1"]],
        CRSV: ["1"],
        MONO: [["0", "1"]],
      }
    }
  }
}

Google Icons

Ajouté à la version : astro@5.16.9 Nouveau

Récupère les polices depuis Google Icons:

provider: fontProviders.googleicons()

Le fournisseur propose des options spécifiques à la famille.

experimental.glyphs

Type : string[]

Lors de la résolution des nouvelles icônes Material Symbols, il est possible de spécifier une liste de glyphes à inclure dans la police pour chaque famille de polices. Cela peut réduire la taille du fichier de police :

{
  // ...
  provider: fontProviders.googleicons(),
  options: {
    experimental: {
      glyphs: ["a"]
    }
  }
}

Local

Ajouté à la version : astro@5.16.13 Nouveau

Récupère les polices de caractères depuis le disque :

provider: fontProviders.local()

Le fournisseur propose des options spécifiques à la famille requises.

variants

Type : LocalFontFamily["variants"]

La propriété options.variants est obligatoire. Chaque variante représente une déclaration @font-face et nécessite une src.

De plus, d’autres propriétés peuvent être spécifiées dans chaque variante.

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.local(),
            name: "Custom",
            cssVariable: "--font-custom",
            options: {
                variants: [
                    {
                        weight: 400,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-400.woff2"]
                    },
                    {
                        weight: 700,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-700.woff2"]
                    }
                    // ...
                ]
            }
        }]
    }
});

weight

Type : number | string
Par défaut : undefined

Une graisse de police :

weight: 200

Si la police associée est une police variable, vous pouvez spécifier une plage de graisses :

weight: "100 900"

Lorsque la valeur n’est pas définie, Astro essaiera par défaut de déduire la valeur en fonction de la première source.

style

Type : "normal" | "italic" | "oblique"
Par défaut : undefined

Un style de police :

style: "normal"

Lorsque la valeur n’est pas définie, Astro essaiera par défaut de déduire la valeur en fonction de la première source.

src

Type : (string | URL | { url: string | URL; tech?: string })[]

Sources de la police. Il peut s’agir d’un chemin relatif à la racine, d’une importation de paquet ou d’une URL. Les URL sont particulièrement utiles si vous injectez des polices locales via une intégration :

src: ["./src/assets/fonts/MaPolice.woff2", "./src/assets/fonts/MaPolice.woff"]

src: [new URL("./custom.ttf", import.meta.url)]

src: ["mon-paquet/UnePolice.ttf"]

Vous pouvez également spécifier une tech en fournissant des objets :

src: [{ url:"./src/assets/fonts/MyFont.woff2", tech: "color-COLRv1" }]

Autres propriétés

Les options suivantes issues des familles de polices sont également disponibles pour les familles de polices locales au sein des variantes :

display
unicodeRange
stretch
featureSettings
variationSettings

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.local(),
            name: "Custom",
            cssVariable: "--font-custom",
            options: {
                variants: [
                    {
                        weight: 400,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-400.woff2"],
                        display: "block"
                    }
                ]
            }
        }]
    }
});

Exemples d’utilisation

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [
      {
        name: "Roboto",
        cssVariable: "--font-roboto",
        provider: fontProviders.google(),
        // Par défaut inclus :
        // weights: [400] ,
        // styles: ["normal", "italics"],
        // subsets: ["latin"],
        // fallbacks: ["sans-serif"],
        // formats: ["woff2"],
      },
      {
        name: "Inter",
        cssVariable: "--font-inter",
        provider: fontProviders.fontsource(),
        // Spécifier les graisses réellement utilisées
        weights: [400, 500, 600, 700],
        // Spécifier les styles réellement utilisés
        styles: ["normal"],
        // Télécharger uniquement les fichiers de polices pour les caractères utilisés sur la page
        subsets: ["latin", "cyrillic"],
        // Télécharger plus de formats de police
        formats: ["woff2", "woff"],
      },
      {
        name: "JetBrains Mono",
        cssVariable: "--font-jetbrains-mono",
        provider: fontProviders.fontsource(),
        // Télécharger uniquement les fichiers de polices pour les caractères utilisés sur la page
        subsets: ["latin", "latin-ext"],
        // Utiliser une famille de polices de repli correspondant à l'apparence souhaitée
        fallbacks: ["monospace"],
      },
      {
        name: "Poppins",
        cssVariable: "--font-poppins",
        provider: fontProviders.local(),
        options: {
          // La graisse et le style ne sont pas précisés, Astro
          // tentera donc de les déduire pour chaque variante.
          variants: [
            {
              src: [
                "./src/assets/fonts/Poppins-regular.woff2",
                "./src/assets/fonts/Poppins-regular.woff",
              ]
            },
            {
              src: [
                "./src/assets/fonts/Poppins-bold.woff2",
                "./src/assets/fonts/Poppins-bold.woff",
              ]
            },
          ]
        }
      }
    ],
  }
});

Référence du composant `<Font />`

Ce composant génère des balises de style et peut éventuellement générer des liens de préchargement pour une famille de polices donnée.

Il doit être importé et ajouté au <head> de votre page. Cette opération est généralement effectuée dans un composant tel que Head.astro, utilisé dans une mise en page de site commune à usage global, mais peut être ajouté à des pages individuelles si nécessaire.

Avec ce composant, vous contrôlez quelle famille de polices est utilisée sur quelle page et quelles polices sont préchargées.

cssVariable

Exemple de type : "--font-roboto" | "--font-comic-sans" | ...

La variable CSS enregistrée dans votre configuration Astro :

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" />

preload

Type : boolean | { weight?: string | number; style?: string; subset?: string }[]
Par défaut : false

Détermine s’il faut ou non afficher les liens de préchargement :

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />

Avec la directive preload, le navigateur commencera immédiatement à télécharger tous les liens de polices possibles pendant le chargement de la page.

Préchargements granulaires

Ajouté à la version : astro@5.15.0

Vous ne souhaiterez peut-être pas toujours précharger chaque lien de police, car cela peut bloquer le chargement d’autres ressources importantes ou télécharger des polices qui ne sont pas nécessaires pour la page actuelle.

Pour contrôler de manière sélective les fichiers de polices préchargés, vous pouvez fournir un tableau d’objets décrivant n’importe quelle combinaison de graisse (weight), de style ou de sous-ensemble (subset) de police à précharger.

L’exemple suivant préchargera uniquement les fichiers de polices avec une graisse de 400 ou un style normal dans le sous-ensemble latin :

---
import { Font } from "astro:assets";
---

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

Les fichiers de polices à graisse variable seront préchargés si une graisse comprise dans leur plage est demandée. Par exemple, un fichier de police pour une graisse de police 100 900 sera inclus lorsque 400 est spécifié dans un objet preload.

Accéder aux données des polices par programmation

L’objet fontData vous permet de récupérer des données de famille de polices de bas niveau par programmation, par exemple dans une route d’API ou pour générer vos propres balises méta.

La fonction getFontBuffer() peut ensuite être utilisée avec les URL récupérées pour obtenir des tampons de polices, par exemple dans une route d’API pour générer des images OpenGraph à l’aide de satori, combinée à une configuration appropriée pour les formats :

import type{ APIRoute } from "astro"
import { fontData, getFontBuffer } from "astro:assets"
import satori from "satori"

export const GET: APIRoute = (context) => {
  const data = fontData["--font-roboto"]

  const svg = await satori(
    <div style={{ color: "black" }}>hello, world</div>,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data: await getFontBuffer(data[0].src[0].url),
          weight: 400,
          style: "normal",
        },
      ],
    },
  )

  // ...
}

`fontData`

Type : Record<CssVariable, Array<FontData>>

Ajouté à la version : astro@5.14.0

Un objet où chaque clé est une cssVariable et la valeur est un tableau décrivant les polices associées. Chaque police est un objet contenant un tableau de src disponibles pour cette police et les propriétés optionnelles suivantes : weight et style.

`getFontBuffer()`

Type : (url: string) => Promise<Buffer>

Ajouté à la version : astro@5.16.13 Nouveau

Renvoie un tampon pour le fichier de police à partir d’une URL source obtenue à partir de fontData.

Référence de configuration des polices

Toutes les propriétés de vos polices doivent être configurées dans le fichier de configuration Astro. Configurez ces paramètres pour personnaliser les données chargées à partir de votre fournisseur de polices, par exemple, pour ne télécharger que certaines graisses ou styles de police. Pour un contrôle plus précis, une configuration granulaire est disponible.

Chaque fournisseur est responsable de la gestion de ces options ; par conséquent, la disponibilité et la prise en charge des propriétés suivantes peuvent varier.

provider, name, et cssVariable sont requis.

provider

Type : FontProvider

La source de vos fichiers de polices. Vous pouvez utiliser un fournisseur intégré ou créer votre propre fournisseur personnalisé :

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [{
      provider: fontProviders.google(),
      name: "Roboto",
      cssVariable: "--font-roboto"
    }]
  }
});

name

Type : string

Le nom de la famille de polices, tel qu’identifié par votre fournisseur de polices :

name: "Roboto"

cssVariable

Type : string

Un identifiant valide de votre choix sous la forme d’une variable CSS (c’est-à-dire commençant par --) :

cssVariable: "--font-roboto"

fallbacks

Type : string[]
Par défaut : ["sans-serif"]

Un tableau de polices à utiliser lorsque la police choisie n’est pas disponible ou est en cours de chargement. Les polices de repli seront sélectionnées dans l’ordre indiqué. La première police disponible sera utilisée :

fallbacks: ["PolicePersonnalisee", "serif"]

Pour désactiver complètement les polices de repli, configurez un tableau vide :

fallbacks: []

Si la dernière police du tableau fallbacks est un nom de famille générique, Astro tentera de générer des solutions de repli optimisées en utilisant les métriques de police. Pour désactiver cette optimisation, définissez optimizedFallbacks sur false.

optimizedFallbacks

Type : boolean
Par défaut : true

S’il faut ou non activer l’optimisation par défaut d’Astro lors de la génération de polices de repli. Vous pouvez désactiver cette optimisation par défaut pour contrôler entièrement la manière dont les solutions de repli sont générées.

optimizedFallbacks: false

weights

Type : (number | string)[]
Par défaut : [400]

Un tableau de graisses de police. Si aucune valeur n’est spécifiée dans votre configuration, seule la graisse 400 est incluse par défaut pour éviter les téléchargements inutiles. Vous devrez inclure cette propriété pour accéder aux autres graisses de police :

weights: [200, "400", "bold"]

Si la police associée est une police variable, vous pouvez spécifier une plage de graisses :

weights: ["100 900"]

styles

Type : ("normal" | "italic" | "oblique")[]
Par défaut : ["normal", "italic"]

Un tableau de styles de police :

styles: ["normal", "oblique"]

subsets

Type : string[]
Par défaut : ["latin"]

Définit une liste de sous-ensembles de polices à précharger.

subsets: ["latin"]

formats

Type : ("woff2" | "woff" | "otf" | "ttf" | "eot")[]
Par défaut : ["woff2"]

Ajouté à la version : astro@5.16.7 Nouveau

Un tableau de formats de police :

formats: ["woff2", "woff"]

options

Type : Record<string, any>

Ajouté à la version : astro@5.16.12 Nouveau

Un objet permettant de transmettre des options spécifiques au fournisseur. Il est typé automatiquement en fonction du fournisseur de la famille de polices :

options: {
  experimental: {
    glyphs: ["a"]
  }
}

display

Type : "auto" | "block" | "swap" | "fallback" | "optional"
Par défaut : "swap"

Définit comment une police s’affiche en fonction du moment où elle est téléchargée et prête à l’emploi :

display: "block"

unicodeRange

Type : string[]
Par défaut : undefined

Détermine quand une police doit être téléchargée et utilisée en fonction d’une plage spécifique de caractères Unicode. Si un caractère de la page correspond à la plage configurée, le navigateur télécharge la police et tous les caractères sont disponibles sur la page. Pour configurer un sous-ensemble de caractères préchargés pour une seule police, consultez plutôt la propriété subsets.

Cela peut être utile pour la localisation afin d’éviter les téléchargements inutiles de polices lorsqu’une partie spécifique de votre site web utilise un alphabet différent et sera affichée avec une police distincte. Par exemple, un site web proposant des versions anglaise et japonaise peut empêcher le navigateur de télécharger la police japonaise sur les versions anglaises de la page qui ne contiennent aucun des caractères japonais fournis dans unicodeRange.

unicodeRange: ["U+26"]

stretch

Type : string
Par défaut : undefined

Un étirement de la police :

stretch: "condensed"

featureSettings

Type : string
Par défaut : undefined

Contrôle les fonctionnalités de police typographique (par exemple, les ligatures, les petites majuscules ou les ornements) :

featureSettings: "'smcp' 2"

variationSettings

Type : string
Par défaut : undefined

Paramètres de variation de police :

variationSettings: "'xhgt' 0.7"

Configuration granulaire des polices

Ajouté à la version : astro@5.15.6

Une famille de polices est définie par une combinaison de propriétés telles que les graisses et les styles (par exemple weights: [500, 600] et styles: ["normal", "bold"]), mais vous pouvez vouloir télécharger uniquement certaines combinaisons de celles-ci.

Pour un meilleur contrôle sur les fichiers de police téléchargés, vous pouvez spécifier plusieurs fois la même police (c’est-à-dire avec les mêmes propriétés cssVariable, name et provider) en utilisant différentes combinaisons. Astro fusionnera les résultats et téléchargera uniquement les fichiers nécessaires. Par exemple, il est possible de télécharger les versions 500 et 600 pour un style normal tout en ne téléchargeant que la version 500 pour l’italique :

import { defineConfig, fontProviders } from "astro/config"

export default defineConfig({
  experimental: {
    fonts: [
      {
        name: "Roboto",
        cssVariable: "--roboto",
        provider: fontProviders.google(),
        weights: [500, 600],
        styles: ["normal"]
      },
      {
        name: "Roboto",
        cssVariable: "--roboto",
        provider: fontProviders.google(),
        weights: [500],
        styles: ["italic"]
      }
    ]
  }
})

Créer votre propre fournisseur de polices

Si vous ne souhaitez pas utiliser l’un des fournisseurs intégrés (par exemple, vous souhaitez utiliser un fournisseur de polices unifont tiers ou créer quelque chose pour un registre privé), vous pouvez créer le vôtre.

La méthode préférée pour implémenter un fournisseur de polices personnalisé est d’exporter une fonction qui retourne l’objet FontProvider et prend la configuration en paramètre.

L’objet fournisseur de polices

L’API expérimentale des polices vous permet d’accéder aux polices de manière unifiée. Chaque famille requiert l’utilisation d’un fournisseur de polices Astro pour récupérer les polices de caractères.

Un FontProvider est un objet qui contient les propriétés requises name et resolveFont(). Il a aussi les propriétés optionnelles config, init() et listFonts() de disponibles.

Le type FontProvider accepte un générique pour les options de la famille.

`name`

Type : string

Un nom unique pour le fournisseur, utilisé dans les logs et pour l’identification.

`resolveFont()`

Type : (options: ResolveFontOptions) => Awaitable<{ fonts: FontFaceData[] } | undefined>

Utilisée pour récupérer et retourner les données d’une police de caractères à partir des options données.

`config`

Type : Record<string, any>
Par défaut : undefined

Un objet sérialisable, utilisé pour l’identification.

`init()`

Type : (context: FontProviderInitContext) => Awaitable<void>
Par défaut : undefined

Fonction de rappel facultative, utilisée pour exécuter toute logique d’initialisation.

`context.storage`

Type : Storage

Utile pour la mise en cache

`context.root`

Type : URL

La racine du projet, utile pour résoudre les chemins d’accès aux fichiers locaux.

`listFonts()`

Type : () => Awaitable<string[] | undefined>
Par défaut : undefined

Fonction de rappel optionnelle, utilisée pour retourner la liste des noms de polices disponibles.

Prendre en charge un registre privé

L’exemple suivant définit un fournisseur de polices pour un registre privé :

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

export function registryFontProvider(): FontProvider {
  let data: Fonts = {}

  return {
    name: "registry",
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    resolveFont: ({ familyName, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

interface Config {
  token: string;
}

export function registryFontProvider(config: Config): FontProvider {
  let data: Fonts = {}

  return {
    name: "registry",
    config,
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    resolveFont: ({ familyName, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

interface FamilyOptions {
  minimal?: boolean;
}

export function registryFontProvider(): FontProvider<FamilyOptions | undefined> {
  let data: Fonts = {}

  return {
    name: "registry",
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    // options est typé en tant que FamilyOptions | undefined
    resolveFont: ({ familyName, options, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

Vous pouvez ensuite enregistrer ce fournisseur de polices dans la configuration d’Astro :

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider(),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider({
              token: "..."
            }),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider(),
            options: {
              minimal: true
            },
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

Prendre en charge un fournisseur unifont tiers

Vous pouvez définir un fournisseur de polices Astro utilisant un fournisseur unifont sous le capot :

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider } from "@acme/unifont-provider"

export function acmeFontProvider(): FontProvider {
  const provider = acmeProvider();
  let initializedProvider: InitializedProvider | undefined;
  return {
    name: provider._name,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider, type AcmeOptions } from "@acme/unifont-provider"

export function acmeFontProvider(config?: AcmeOptions): FontProvider {
  const provider = acmeProvider(config);
  let initializedProvider: InitializedProvider | undefined;
  return {
    name: provider._name,
    config,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider, type AcmeFamilyOptions } from "@acme/unifont-provider"

export function acmeFontProvider(): FontProvider<AcmeFamilyOptions | undefined> {
  const provider = acmeProvider();
  let initializedProvider: InitializedProvider<AcmeFamilyOptions> | undefined;
  return {
    name: provider._name,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

Vous pouvez ensuite enregistrer ce fournisseur de polices dans la configuration d’Astro :

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider(),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider({
              token: "..."
            }),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider(),
            options: {
              minimal: true
            },
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

Mise en cache

L’implémentation de la mise en cache de l’API Fonts a été conçue pour être pratique en développement et efficace en production. Lors des constructions, les fichiers de polices sont copiés dans le répertoire de sortie _astro/fonts, afin qu’ils puissent bénéficier de la mise en cache HTTP des ressources statiques (généralement un an).

Pour vider le cache en développement, supprimez le répertoire .astro/fonts. Pour vider le cache de construction, supprimez le répertoire node_modules/.astro/fonts

Lectures complémentaires

Pour plus de détails et pour donner votre avis sur cette API expérimentale, consultez la RFC pour les polices.

Contribuer Communauté Parrainer

API des polices expérimentale

Utilisation

Fournisseurs de polices disponibles

Adobe

Bunny

Fontshare

Fontsource

Google

experimental.glyphs

experimental.variableAxis

Google Icons

experimental.glyphs

Local

variants

weight

style

src

Autres propriétés

Exemples d’utilisation

Référence du composant <Font />

cssVariable

preload

Préchargements granulaires

Accéder aux données des polices par programmation

fontData

getFontBuffer()

Référence de configuration des polices

provider

name

cssVariable

fallbacks

optimizedFallbacks

weights

styles

subsets

formats

options

display

unicodeRange

stretch

featureSettings

variationSettings

Configuration granulaire des polices

Créer votre propre fournisseur de polices

L’objet fournisseur de polices

name

resolveFont()

config

init()

context.storage

context.root

listFonts()

Prendre en charge un registre privé

Prendre en charge un fournisseur unifont tiers

Mise en cache

Lectures complémentaires

Référence du composant `<Font />`

`fontData`

`getFontBuffer()`

`name`

`resolveFont()`

`config`

`init()`

`context.storage`

`context.root`

`listFonts()`