Use Astro's experimental fonts support for Roboto

Transitioned from manual Google Fonts import to Astro's built-in experimental font management. This improves handling of the Roboto font via a cssVariable, preload, and integrates font weights and styles directly through Astro's configuration.

Author: khalidabuhakmeh

astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import starlight from "@astrojs/starlight";
 import starlightLinksValidator from "starlight-links-validator";
 import starlightClientMermaid from "@pasqal-io/starlight-client-mermaid";
@@ -18,6 +18,18 @@ export default defineConfig({
   site: "https://docs.duendesoftware.com",
   trailingSlash: "ignore",
   redirects: {},
+  experimental: {
+    fonts: [
+      {
+        provider: fontProviders.google(),
+        name: "Roboto",
+        cssVariable: "--font-roboto",
+        weights: ["100 900", "bold"],
+        styles: ["normal", "italic"],
+        display: "swap",
+      },
+    ],
+  },
   integrations: [
     starlight({
       customCss: ["./src/styles/custom.css"],

src/components/Head.astro

@@ -1,5 +1,6 @@
 ---
 import { getImagePath } from "astro-opengraph-images";
+import { Font } from "astro:assets";
 
 const { head } = Astro.locals.starlightRoute;
 const { url, site } = Astro;
@@ -8,4 +9,4 @@ const openGraphImageUrl = getImagePath({ url, site });
 
 {head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
 {openGraphImageUrl && (<meta property="og:image" content={openGraphImageUrl} />)}
-
+<Font cssVariable="--font-roboto" preload />

src/styles/custom.css

@@ -1,9 +1,8 @@
-/* Font */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
-
 /* Dark mode colors. */
 :root {
-    --sl-font: 'Roboto';
+    /* coming from Astro Font support. See astro.config.mjs */
+    /*noinspection CssUnresolvedCustomProperty*/
+    --sl-font: var(--font-roboto);
     --sl-color-accent-low: #43257c;
     --sl-color-accent: #6e45af;
     --sl-color-accent-high: #916bdb;