How to use the new Astro 6 Fonts system in starlight

[Keshav-writes-code]

i want to use the new astro6 font syste for a starlight project

[HiDeoo]

Using custom fonts with Astro 6 in Starlight requires a bit of setup at the moment.

1. First, you would need to configure a custom font as documented in Astro Docs, for example using the "Press Start 2P" font from Fontsource:

   // astro.config.mjs
   import { defineConfig, fontProviders } from "astro/config";
   
   export default defineConfig({
     fonts: [
       {
         provider: fontProviders.fontsource(),
         name: "Press Start 2P",
         cssVariable: "--font-press-start-2p",
       },
     ],
   });

2. Then, you would need to add the font to Starlight page head with an identifying CSS variable. This can be achieved by using Starlight component overrides which also allows re-using built-in Starlight components:

   // astro.config.mjs
   starlight({
     title: "My Docs with Overrides",
     components: {
       // Override the default `Head` component.
       Head: "./src/components/Head.astro",
     },
   });

3. With such an override configured, you can create a custom Head.astro component that re-uses the built-in Head component and adds the custom font:

   ---
   // src/components/Head.astro
   import Default from '@astrojs/starlight/components/Head.astro';
   import { Font } from "astro:assets";
   ---
   
   <!-- Render the default Head component -->
   <Default><slot /></Default>
   <!-- Add the custom font to the head -->
   <Font cssVariable="--font-press-start-2p" />

4. At this point, you can follow the Starlight guide on using custom fonts:

   /* src/styles/custom.css */
   :root {
     --sl-font: var(--font-press-start-2p);
   }

At this point, your project will be using the "Press Start 2P" font:

You can find a complete example here: https://starlight-examples.netlify.app/examples/custom-fonts/

Maybe there is a future where we provide some native Starlight options to make this process easier, and avoid all this boilerplate, but for now, this setup should work just fine!

[Keshav-writes-code]

Thanks a lot

[Keshav-writes-code]

okay, so the problem now is that there is a subtle font change happing eveytime i refresh the page. which looks kinda bad,

[EDIT]
fixed it by used preload on the <Font> component