radiant-docs 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/package-lock.json

@@ -16,7 +16,16 @@
         "@astrojs/preact": "^4.1.3",
         "@astrojs/sitemap": "^3.7.2",
         "@aws-sdk/client-s3": "^3.964.0",
-        "@fontsource/google-sans-flex": "^5.2.2",
+        "@fontsource-variable/geist": "^5.2.9",
+        "@fontsource-variable/geist-mono": "^5.2.8",
+        "@fontsource-variable/google-sans": "^5.2.1",
+        "@fontsource-variable/google-sans-code": "^5.2.4",
+        "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/inter-tight": "^5.2.7",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
+        "@fontsource-variable/public-sans": "^5.2.7",
+        "@fontsource-variable/source-sans-3": "^5.2.9",
+        "@fontsource-variable/source-serif-4": "^5.2.9",
         "@iconify-json/fluent": "^1.2.47",
         "@iconify-json/lucide": "^1.2.79",
         "@iconify-json/simple-icons": "^1.2.69",
@@ -43,7 +52,7 @@
         "preact": "^10.29.0",
         "prism-themes": "^1.9.0",
         "prismjs": "^1.30.0",
-        "radiant-docs-validator": "^0.1.15",
+        "radiant-docs-validator": "^0.1.19",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-slug": "^6.0.0",
         "remark-gfm": "^4.0.1",
@@ -1979,10 +1988,91 @@
         "node": ">=18"
       }
     },
-    "node_modules/@fontsource/google-sans-flex": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/@fontsource/google-sans-flex/-/google-sans-flex-5.2.2.tgz",
-      "integrity": "sha512-csDVeKsxOlVt/sJdgk39rL8pJeW7Pi+JFaJ87H5uuX9hkU+V5EGE+WCWkq6QZaIPZAsfjSF8fA1cuD84QbX0dA==",
+    "node_modules/@fontsource-variable/geist": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.9.tgz",
+      "integrity": "sha512-TP+QSBG3wxKGPE33CbMy/L0Nu3qvJ6Fy81Yc4LnQ95xH+i+cfEp8fyU8/kfV14YwszxIFPhnoMTbjL71waVpyQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/geist-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.2.8.tgz",
+      "integrity": "sha512-KI5bj+hkkRiHttYHmccotUZ80ZuZyai+RwI1d7UId0clkx/jXxlo8qYK8j54WzmpBjtMoEMPyllV7faDcj+6RA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/google-sans": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/google-sans/-/google-sans-5.2.1.tgz",
+      "integrity": "sha512-dMyMlJVRJgQvvYlJLcrg2oiVzlKAuIMrbDxIMchEiMBGmpOA6VnVblj3cPfJyA0/fNPQS6krZaiJyJjHJZmkzw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/google-sans-code": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/google-sans-code/-/google-sans-code-5.2.4.tgz",
+      "integrity": "sha512-70i7eS9B7VYT1sJcpU+bYnCrKwWOh8+RCTZNLgzE3crUaDwAqx0hRhd2Hr0ZyStJq88f+CF8/r+YUK0A3gMsPA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/inter-tight": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter-tight/-/inter-tight-5.2.7.tgz",
+      "integrity": "sha512-uU0qW9vlzVQQv8GVrhn8SlNl2A44C0CE9IC6N9P0D9mwhmJcg8UF/fxvmdRayDPlMAnYqxlXtYENDIeZyVvxkg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/public-sans": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/public-sans/-/public-sans-5.2.7.tgz",
+      "integrity": "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/source-sans-3": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/source-sans-3/-/source-sans-3-5.2.9.tgz",
+      "integrity": "sha512-K9fkQbb0BNnRmmaU+Gpr6U4IaYKpNzA8t07J6aam2i+6v84RT72MVpar8OBr3yYAEznj4riKivPQ2nAF2fPKsw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/source-serif-4": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/source-serif-4/-/source-serif-4-5.2.9.tgz",
+      "integrity": "sha512-PPcxjLFk/fS0WHg79pDM2YNvz61kC+oYZ5cWZZyCS0DHpJncmuYOuiZAsvj4tDxlWPBEvxxcRLQQNmSaRbPkqw==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -11633,9 +11723,9 @@
       "license": "MIT"
     },
     "node_modules/radiant-docs-validator": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/radiant-docs-validator/-/radiant-docs-validator-0.1.15.tgz",
-      "integrity": "sha512-sGjkGpMyK47C4KqKt6d51/gu6R4mTQrEFLcv/w0KFbDR+kO22GKRFVj79TK48DOHvmr0prpB6yhEo8EDdjLMDQ==",
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/radiant-docs-validator/-/radiant-docs-validator-0.1.19.tgz",
+      "integrity": "sha512-AWCm/LDmFhekwUcXcvGwUlbqdL2tcSQtHGDo0ZkGdGApQOhZ9/KDsr+0OXjZ2+HFDgQx/cd3FB/re78wE5DjYA==",
       "license": "MIT",
       "dependencies": {
         "@iconify-json/fluent": "^1.2.47",

package/template/package.json

@@ -20,7 +20,16 @@
     "@astrojs/preact": "^4.1.3",
     "@astrojs/sitemap": "^3.7.2",
     "@aws-sdk/client-s3": "^3.964.0",
-    "@fontsource/google-sans-flex": "^5.2.2",
+    "@fontsource-variable/geist": "^5.2.9",
+    "@fontsource-variable/geist-mono": "^5.2.8",
+    "@fontsource-variable/google-sans": "^5.2.1",
+    "@fontsource-variable/google-sans-code": "^5.2.4",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/inter-tight": "^5.2.7",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/public-sans": "^5.2.7",
+    "@fontsource-variable/source-sans-3": "^5.2.9",
+    "@fontsource-variable/source-serif-4": "^5.2.9",
     "@iconify-json/fluent": "^1.2.47",
     "@iconify-json/lucide": "^1.2.79",
     "@iconify-json/simple-icons": "^1.2.69",
@@ -47,7 +56,7 @@
     "preact": "^10.29.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
-    "radiant-docs-validator": "^0.1.15",
+    "radiant-docs-validator": "^0.1.19",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",

package/template/src/components/Header.astro

@@ -176,7 +176,7 @@ const navbarPrimaryHref = config.navbar?.primary
               <button
                 type="button"
                 aria-label="Open assistant"
-                class="assistant-header-trigger hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-[350] dark:font-[450] transition-opacity duration-200 hover:opacity-95 cursor-pointer"
+                class="assistant-header-trigger hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-normal dark:font-medium transition-opacity duration-200 hover:opacity-95 cursor-pointer"
                 style={assistantHeaderButtonStyle}
                 onclick="window.__assistantToggleRequested = true; window.dispatchEvent(new CustomEvent('ask-ai:toggle'));"
               >
@@ -208,7 +208,7 @@ const navbarPrimaryHref = config.navbar?.primary
                   {navbarLinks.map((l, i, a) => (
                     <a
                       class:list={[
-                        "items-center gap-1 text-[13px] font-[450] dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
+                        "items-center gap-1 text-[13px] font-medium dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
                         showAssistantNavbarButton && a.length === 3 && i === 2
                           ? "hidden 2xl:flex"
                           : "flex",
@@ -250,7 +250,7 @@ const navbarPrimaryHref = config.navbar?.primary
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "navbar-primary-trigger font-[350] dark:font-[450] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] duration-200 transition-all whitespace-nowrap hover:opacity-95",
+                    "navbar-primary-trigger h-8 flex items-center gap-2 px-3 text-[13px] font-normal dark:font-medium rounded-lg [corner-shape:superellipse(1.2)] duration-200 transition-all whitespace-nowrap hover:opacity-95",
                   ]}
                   style={navbarPrimaryButtonStyle}
                   href={navbarPrimaryHref}

package/template/src/components/MdxPage.astro

@@ -68,7 +68,9 @@ const tocHeadings = headings.filter(
   <div class="flex w-full min-w-0 justify-between gap-x-10">
     <div class="mx-auto max-w-3xl w-full">
       <header class="mb-6">
-        <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
+        <h1 class="rd-document-heading text-4xl font-semibold tracking-tight">
+          {title}
+        </h1>
       </header>
       <article class="prose-rules">
         <Content components={components} />

package/template/src/components/OpenApiPage.astro

@@ -857,7 +857,9 @@ const formattedBodyDescription = bodyDescription
 <Layout pageTitle={title}>
   <article>
     <header class="mb-6">
-      <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
+      <h1 class="rd-document-heading text-4xl font-semibold tracking-tight">
+        {title}
+      </h1>
     </header>
     <div class="flex flex-row-reverse justify-between gap-6 w-full">
       <aside class="flex-1 min-w-0 hidden xl:block">
@@ -955,7 +957,9 @@ const formattedBodyDescription = bodyDescription
 
               return (
                 <section class="mt-10">
-                  <h4 class="text-xl font-semibold">{headers[key]}</h4>
+                  <h4 class="rd-document-heading text-xl font-semibold">
+                    {headers[key]}
+                  </h4>
                   {key === "body" && formattedBodyDescription && (
                     <div
                       class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"

package/template/src/components/Sidebar.astro

@@ -24,7 +24,7 @@ const config: DocsConfig = await getConfig();
       askAiEnabled ? "justify-start" : "justify-end",
     ]}
   >
-    <span class="text-neutral-400 text-xs font-light">Theme</span>
+    <span class="text-neutral-400 text-xs font-normal">Theme</span>
     <ThemeSwitcher />
   </div>
 </aside>

package/template/src/components/chat/AssistantEmbedPanel.tsx

@@ -2054,7 +2054,7 @@ export default function AssistantEmbedPanel({
                   }
                 />
                 <p
-                  className="assistant-empty-state-item mt-3 text-3xl font-[450] leading-9 text-neutral-900 dark:text-neutral-50"
+                  className="assistant-empty-state-item mt-3 text-3xl font-medium leading-9 text-neutral-900 dark:text-neutral-50"
                   style={
                     {
                       "--assistant-empty-state-delay": "300ms",

package/template/src/components/chat/AssistantEmbedPanelPage.astro

@@ -1,14 +1,15 @@
 ---
 import "../../styles/global.css";
-import "../../styles/google-sans-flex.css";
-import "../../styles/geist-mono.css";
 import AssistantEmbedPanel from "./AssistantEmbedPanel";
 import { getAssistantPanelRuntimeConfig } from "../../lib/assistant-panel-config";
+import { getDocsFontCss, getDocsFontPreloads } from "../../lib/font-css";
 import { getDocsThemeCss } from "../../lib/theme-css";
 import { getConfig } from "../../lib/validation";
 
 const config = await getConfig();
 const themeCss = getDocsThemeCss(config.theme);
+const fontCss = getDocsFontCss(config.theme);
+const fontPreloads = getDocsFontPreloads(config.theme);
 const assistantConfig = getAssistantPanelRuntimeConfig(config);
 ---
 
@@ -19,6 +20,18 @@ const assistantConfig = getAssistantPanelRuntimeConfig(config);
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex" />
     <style is:inline is:global set:html={themeCss}></style>
+    <style is:inline is:global set:html={fontCss}></style>
+    {
+      fontPreloads.map((font) => (
+        <link
+          rel="preload"
+          href={font.href}
+          as="font"
+          type={font.type}
+          crossorigin
+        />
+      ))
+    }
     <script is:inline>
       (() => {
         const applyTheme = (theme) => {

package/template/src/components/endpoint/PlaygroundButton.astro

@@ -38,7 +38,7 @@ import { Icon } from "astro-icon/components";
 >
   <button
     x-on:click="open = true"
-    class="font-[350] dark:font-[450] flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] text-white dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer"
+    class="flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] font-normal text-white dark:font-medium dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer"
   >
     <Icon class="-ml-px size-3.5" name="lucide:square-mouse-pointer" />
     Try it

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -541,7 +541,7 @@ const sectionVariantFieldNames = Object.fromEntries(
       <button
         @click="sendRequest($event)"
         :disabled="loading"
-        class="font-[350] dark:font-[450] relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] text-white dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
+        class="relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] font-normal text-white dark:font-medium dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
       >
       <span class="flex items-center gap-2">
           <Icon

package/template/src/components/endpoint/ResponseFields.astro

@@ -744,7 +744,7 @@ Object.entries(responses)
 ---
 
 <div>
-  <h4 class="text-xl font-semibold mt-10">Responses</h4>
+  <h4 class="rd-document-heading text-xl font-semibold mt-10">Responses</h4>
   {
     responseFields.map((response) => (
       <div class="mt-6">
@@ -756,9 +756,9 @@ Object.entries(responses)
                 getStatusCodeDotClass(response.statusCode),
               ]}
             />
-            <h5 class="text-lg font-medium leading-none">
+            <span class="text-lg font-medium leading-none">
               {response.statusCode}
-            </h5>
+            </span>
           </div>
           {response.description && (
             <span class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">

package/template/src/components/ui/Field.astro

@@ -77,23 +77,23 @@ if (hasMinLength && hasMaxLength) {
 
 <div class="space-y-3">
   <div class="flex flex-wrap items-center gap-x-2 gap-y-px">
-    <h5 class="font-medium leading-4">
+    <span class="font-medium leading-4">
       {name}
-    </h5>
+    </span>
     <code
       class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm dark:text-neutral-300 dark:border-neutral-700/70 dark:bg-neutral-900/70"
       >{type}</code
     >
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
+        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
           required
         </div>
       )
     }
     {
       optional && (
-        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-blue-300 dark:bg-blue-950/40 dark:border-blue-900/40">
+        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-blue-300 dark:bg-blue-950/40 dark:border-blue-900/40">
           optional
         </div>
       )

package/template/src/components/user/Callout.astro

@@ -100,13 +100,13 @@ const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
               class="shrink-0 border border-white"
             />
           ) : null}
-          <h6
+          <div
             class:list={[
               "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
             ]}
           >
             {resolvedTitle}
-          </h6>
+          </div>
         </div>
         <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
           <slot />

package/template/src/components/user/Card.astro

@@ -239,7 +239,7 @@ const CardGradient = hasCover
           )
         }
         <div class="ml-1 self-center min-w-0 flex-1">
-          <h4
+          <div
             class="not-prose m-0 flex min-w-0 items-center text-base font-semibold text-neutral-900 dark:text-neutral-100"
           >
             {
@@ -267,7 +267,7 @@ const CardGradient = hasCover
                 </>
               )
             }
-          </h4>
+          </div>
           {
             descriptionHtml && (
               <div

package/template/src/components/user/Image.astro

@@ -6,13 +6,22 @@ interface Props {
   alt?: string;
   title?: string;
   width?: number | string;
+  align?: "left" | "center" | "right";
   zoom?: boolean;
 }
 
 const imageProps = Astro.props as Record<string, unknown>;
-const { src, alt, title, width, zoom = true } = imageProps as Props;
+const {
+  src,
+  alt,
+  title,
+  width,
+  align = "center",
+  zoom = true,
+} = imageProps as Props;
 const zoomEnabled = zoom !== false;
 const rawWidth = width;
+const imageAlign = align === "left" || align === "right" ? align : "center";
 
 function normalizeImageSource(value: Props["src"]): {
   light: string;
@@ -103,6 +112,12 @@ const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
 const contentWidthStyle = hasCustomImageWidth
   ? `width: ${toCssWidthValue(rawWidth) ?? "auto"};`
   : undefined;
+const constrainedWidthAlignmentClass =
+  imageAlign === "left"
+    ? "w-fit max-w-full ml-0 mr-auto"
+    : imageAlign === "right"
+      ? "w-fit max-w-full ml-auto mr-0"
+      : "w-fit max-w-full mx-auto";
 
 const slotCaptionHtml = Astro.slots.has("default")
   ? (await Astro.slots.render("default")).trim()
@@ -113,7 +128,7 @@ const hasCaption = slotCaptionHtml.length > 0;
 <figure
   class:list={[
     "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border-[0.5px] border-neutral-900/8 dark:border-white/6 bg-(--rd-code-surface) rounded-2xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-8px_rgba(0,0,0,0.2)]",
-    hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
+    hasCustomImageWidth ? constrainedWidthAlignmentClass : "w-full",
   ]}
   x-data="{ 
     open: false, 

package/template/src/components/user/Step.astro

@@ -21,7 +21,9 @@ const { title } = Astro.props;
       "step-number before:leading-none before:size-7 before:bg-neutral-900/6 dark:before:bg-neutral-50/6 before:rounded-full before:text-neutral-700 dark:before:text-neutral-100 before:flex before:items-center before:justify-center before:text-[13px] before:font-medium before:absolute before:left-0 before:top-0",
     ]}
   >
-    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+    <h3
+      class="rd-document-heading text-lg font-semibold text-neutral-900 dark:text-neutral-100"
+    >
       {title}
     </h3>
   </div>

package/template/src/layouts/Layout.astro

@@ -1,11 +1,5 @@
 ---
 import "../styles/global.css";
-import "../styles/google-sans-flex.css";
-import "../styles/geist-mono.css";
-import googleSansLatinWoff2 from "../assets/fonts/google-sans-flex/latin.woff2?url";
-import googleSansLatinExtWoff2 from "../assets/fonts/google-sans-flex/latin-ext.woff2?url";
-import geistMonoLatinWoff2 from "../assets/fonts/geist-mono/latin.woff2?url";
-import geistMonoLatinExtWoff2 from "../assets/fonts/geist-mono/latin-ext.woff2?url";
 import Sidebar from "../components/Sidebar.astro";
 import { getConfig } from "../lib/validation";
 import Header from "../components/Header.astro";
@@ -14,6 +8,7 @@ import AssistantDocsWidget from "../components/chat/AssistantDocsWidget.astro";
 import { ClientRouter } from "astro:transitions";
 import { prependBasePath, stripBasePath } from "../lib/base-path";
 import { getFaviconConfig } from "../lib/favicon";
+import { getDocsFontCss, getDocsFontPreloads } from "../lib/font-css";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 import { getDocsThemeCss } from "../lib/theme-css";
 
@@ -41,6 +36,8 @@ const { pageTitle, pageDescription } = Astro.props as Props;
 const config = await getConfig();
 const favicon = getFaviconConfig();
 const neutralPaletteCss = getDocsThemeCss(config.theme);
+const fontCss = getDocsFontCss(config.theme);
+const fontPreloads = getDocsFontPreloads(config.theme);
 const resolvedPageTitle = pageTitle?.trim();
 const resolvedPageDescription =
   typeof pageDescription === "string" && pageDescription.trim().length > 0
@@ -77,6 +74,7 @@ const askAiEnabled = isDev || orgTier >= 3;
 <html lang="en">
   <head>
     <style is:inline is:global set:html={neutralPaletteCss}></style>
+    <style is:inline is:global set:html={fontCss}></style>
     <ClientRouter />
     <script is:inline>
       const applyTheme = () => {
@@ -196,34 +194,17 @@ const askAiEnabled = isDev || orgTier >= 3;
         }
       })();
     </script>
-    <link
-      rel="preload"
-      href={googleSansLatinWoff2}
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href={googleSansLatinExtWoff2}
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href={geistMonoLatinWoff2}
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href={geistMonoLatinExtWoff2}
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
+    {
+      fontPreloads.map((font) => (
+        <link
+          rel="preload"
+          href={font.href}
+          as="font"
+          type={font.type}
+          crossorigin
+        />
+      ))
+    }
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link

package/template/src/lib/font-css.ts

@@ -0,0 +1,376 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { resolveStaticAssetUrl } from "./static-asset-url";
+import {
+  DEFAULT_CODE_FONT_PRESET,
+  DEFAULT_TEXT_FONT_PRESET,
+  FONT_PRESET_OPTIONS,
+  type DocsConfig,
+  type FontPresetOption,
+} from "./validation";
+
+const require = createRequire(import.meta.url);
+
+const FONT_ROUTE_PREFIX = "/-/fonts";
+const FONT_CONTENT_TYPE = "font/woff2";
+const FONT_DISPLAY = "block";
+
+type FontPresetId = FontPresetOption;
+
+type FontSourceFile = {
+  fileName: string;
+  preload?: boolean;
+};
+
+type FontsourceConfig = {
+  packageName: string;
+  routeDir: string;
+  cssFiles: string[];
+  files: FontSourceFile[];
+};
+
+type FontPreset = {
+  stack: string;
+  fontsource?: FontsourceConfig;
+};
+
+export type FontPreload = {
+  href: string;
+  type: "font/woff2";
+};
+
+export type DocsFontFile = {
+  routePath: string;
+  sourcePath: string;
+  contentType: typeof FONT_CONTENT_TYPE;
+};
+
+const fontCssCache = new Map<FontPresetId, string>();
+const fontRoutePathCache = new Map<string, string>();
+
+const LATIN_UNICODE_FILES = ["latin-ext", "latin"] as const;
+const FONT_STYLES = ["normal", "italic"] as const;
+
+function getFontsourceFiles(fontId: string): FontSourceFile[] {
+  return FONT_STYLES.flatMap((style) =>
+    LATIN_UNICODE_FILES.map((subset) => ({
+      fileName: `${fontId}-${subset}-wght-${style}.woff2`,
+      preload: subset === "latin" && style === "normal",
+    })),
+  );
+}
+
+const FONT_PRESETS: Record<FontPresetId, FontPreset> = {
+  "google-sans": {
+    stack: '"Google Sans Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/google-sans",
+      routeDir: "google-sans",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("google-sans"),
+    },
+  },
+  inter: {
+    stack: '"Inter Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/inter",
+      routeDir: "inter",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("inter"),
+    },
+  },
+  "inter-tight": {
+    stack: '"Inter Tight Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/inter-tight",
+      routeDir: "inter-tight",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("inter-tight"),
+    },
+  },
+  geist: {
+    stack: '"Geist Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/geist",
+      routeDir: "geist",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("geist"),
+    },
+  },
+  "source-sans-3": {
+    stack: '"Source Sans 3 Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/source-sans-3",
+      routeDir: "source-sans-3",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("source-sans-3"),
+    },
+  },
+  "source-serif-4": {
+    stack:
+      '"Source Serif 4 Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    fontsource: {
+      packageName: "@fontsource-variable/source-serif-4",
+      routeDir: "source-serif-4",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("source-serif-4"),
+    },
+  },
+  "public-sans": {
+    stack: '"Public Sans Variable", ui-sans-serif, system-ui, sans-serif',
+    fontsource: {
+      packageName: "@fontsource-variable/public-sans",
+      routeDir: "public-sans",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("public-sans"),
+    },
+  },
+  "geist-mono": {
+    stack:
+      '"Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontsource: {
+      packageName: "@fontsource-variable/geist-mono",
+      routeDir: "geist-mono",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("geist-mono"),
+    },
+  },
+  "jetbrains-mono": {
+    stack:
+      '"JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontsource: {
+      packageName: "@fontsource-variable/jetbrains-mono",
+      routeDir: "jetbrains-mono",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("jetbrains-mono"),
+    },
+  },
+  "google-sans-code": {
+    stack:
+      '"Google Sans Code Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontsource: {
+      packageName: "@fontsource-variable/google-sans-code",
+      routeDir: "google-sans-code",
+      cssFiles: ["wght.css", "wght-italic.css"],
+      files: getFontsourceFiles("google-sans-code"),
+    },
+  },
+  "system-sans": {
+    stack: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+  "system-serif": {
+    stack: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  },
+  "system-mono": {
+    stack:
+      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+};
+
+type FontThemeConfig = {
+  text?: unknown;
+  heading?: unknown;
+  code?: unknown;
+};
+
+const FONT_PRESET_ID_SET = new Set<FontPresetId>(FONT_PRESET_OPTIONS);
+
+function getConfiguredFonts(theme: DocsConfig["theme"]): FontThemeConfig {
+  return theme?.fonts ?? {};
+}
+
+function normalizeFontPresetId(value: unknown): FontPresetId | null {
+  if (typeof value !== "string") return null;
+
+  const normalized = value.trim().toLowerCase();
+  return FONT_PRESET_ID_SET.has(normalized as FontPresetId)
+    ? (normalized as FontPresetId)
+    : null;
+}
+
+function resolveFontPresetIds(theme: DocsConfig["theme"]): {
+  text: FontPresetId;
+  heading: FontPresetId;
+  code: FontPresetId;
+} {
+  const fonts = getConfiguredFonts(theme);
+  const text = normalizeFontPresetId(fonts.text) ?? DEFAULT_TEXT_FONT_PRESET;
+  return {
+    text,
+    heading: normalizeFontPresetId(fonts.heading) ?? text,
+    code: normalizeFontPresetId(fonts.code) ?? DEFAULT_CODE_FONT_PRESET,
+  };
+}
+
+function getFontsourceCssPath(
+  fontsource: FontsourceConfig,
+  cssFile: string,
+): string {
+  return require.resolve(`${fontsource.packageName}/${cssFile}`);
+}
+
+function getFontsourceFilePath(
+  fontsource: FontsourceConfig,
+  fileName: string,
+): string {
+  return require.resolve(`${fontsource.packageName}/files/${fileName}`);
+}
+
+function getFontsourceCssUrlPattern(): RegExp {
+  return /url\((["']?)\.\/files\/([^"')]+)\1\)/g;
+}
+
+function getFontFaceBlockPattern(): RegExp {
+  return /(?:\/\*[\s\S]*?\*\/\s*)?@font-face\s*\{[\s\S]*?\}\s*/g;
+}
+
+function applyFontDisplay(block: string): string {
+  return block.replace(/font-display:\s*[^;]+;/, `font-display: ${FONT_DISPLAY};`);
+}
+
+function getFontRoutePath(
+  fontsource: FontsourceConfig,
+  fileName: string,
+): string {
+  const cacheKey = `${fontsource.packageName}/${fileName}`;
+  const cachedRoutePath = fontRoutePathCache.get(cacheKey);
+  if (cachedRoutePath) return cachedRoutePath;
+
+  const sourcePath = getFontsourceFilePath(fontsource, fileName);
+  const hash = crypto
+    .createHash("sha256")
+    .update(fs.readFileSync(sourcePath))
+    .digest("hex")
+    .slice(0, 12);
+  const extension = path.extname(fileName);
+  const basename = path.basename(fileName, extension);
+  const routePath = `${fontsource.routeDir}/${basename}.${hash}${extension}`;
+
+  fontRoutePathCache.set(cacheKey, routePath);
+  return routePath;
+}
+
+function getFontPublicUrl(
+  fontsource: FontsourceConfig,
+  fileName: string,
+): string {
+  return resolveStaticAssetUrl(
+    `${FONT_ROUTE_PREFIX}/${getFontRoutePath(fontsource, fileName)}`,
+  );
+}
+
+function getFontsourceCss(presetId: FontPresetId): string {
+  const cachedCss = fontCssCache.get(presetId);
+  if (cachedCss !== undefined) return cachedCss;
+
+  const fontsource = FONT_PRESETS[presetId].fontsource;
+  if (!fontsource) return "";
+
+  const includedFiles = new Set(
+    fontsource.files.map((fontFile) => fontFile.fileName),
+  );
+  const matchedFiles = new Set<string>();
+  const resolvedCss = fontsource.cssFiles
+    .flatMap((cssFile) => {
+      const css = fs.readFileSync(getFontsourceCssPath(fontsource, cssFile), {
+        encoding: "utf8",
+      });
+
+      return Array.from(css.matchAll(getFontFaceBlockPattern()), ([block]) => {
+        const urlMatch = getFontsourceCssUrlPattern().exec(block);
+        const fileName = urlMatch?.[2];
+        if (!fileName || !includedFiles.has(fileName)) return "";
+
+        matchedFiles.add(fileName);
+        return applyFontDisplay(block).replace(
+          getFontsourceCssUrlPattern(),
+          (_match, _quote, matchedFileName) =>
+            `url("${getFontPublicUrl(fontsource, matchedFileName)}")`,
+        );
+      });
+    })
+    .filter(Boolean)
+    .join("\n");
+
+  const missingFiles = Array.from(includedFiles).filter(
+    (fileName) => !matchedFiles.has(fileName),
+  );
+  if (missingFiles.length > 0) {
+    throw new Error(
+      `Font preset "${presetId}" is missing @font-face blocks for: ${missingFiles.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  fontCssCache.set(presetId, resolvedCss);
+  return resolvedCss;
+}
+
+function getSelectedFontPresetIds(theme: DocsConfig["theme"]): FontPresetId[] {
+  const fontPresetIds = resolveFontPresetIds(theme);
+  return [...new Set(Object.values(fontPresetIds))];
+}
+
+export function getDocsFontCss(theme: DocsConfig["theme"]): string {
+  const fontPresetIds = resolveFontPresetIds(theme);
+  const fontFaceCss = getSelectedFontPresetIds(theme).map((presetId) =>
+    getFontsourceCss(presetId),
+  );
+
+  return [
+    ...fontFaceCss.filter(Boolean),
+    ":root {",
+    `  --rd-font-text: ${FONT_PRESETS[fontPresetIds.text].stack};`,
+    `  --rd-font-heading: ${FONT_PRESETS[fontPresetIds.heading].stack};`,
+    `  --rd-font-code: ${FONT_PRESETS[fontPresetIds.code].stack};`,
+    "}",
+  ].join("\n");
+}
+
+export function getDocsFontPreloads(
+  theme: DocsConfig["theme"],
+): FontPreload[] {
+  const preloadUrls = new Set<string>();
+
+  for (const presetId of getSelectedFontPresetIds(theme)) {
+    const fontsource = FONT_PRESETS[presetId].fontsource;
+    if (!fontsource) continue;
+
+    for (const fontFile of fontsource.files) {
+      if (!fontFile.preload) continue;
+      preloadUrls.add(getFontPublicUrl(fontsource, fontFile.fileName));
+    }
+  }
+
+  return Array.from(preloadUrls, (href) => ({
+    href,
+    type: "font/woff2" as const,
+  }));
+}
+
+export function getSelectedDocsFontFiles(
+  theme: DocsConfig["theme"],
+): DocsFontFile[] {
+  const fontFiles = new Map<string, DocsFontFile>();
+
+  for (const presetId of getSelectedFontPresetIds(theme)) {
+    const fontsource = FONT_PRESETS[presetId].fontsource;
+    if (!fontsource) continue;
+
+    for (const fontFile of fontsource.files) {
+      const routePath = getFontRoutePath(fontsource, fontFile.fileName);
+      fontFiles.set(routePath, {
+        routePath,
+        sourcePath: getFontsourceFilePath(fontsource, fontFile.fileName),
+        contentType: FONT_CONTENT_TYPE,
+      });
+    }
+  }
+
+  return Array.from(fontFiles.values()).sort((a, b) =>
+    a.routePath.localeCompare(b.routePath),
+  );
+}

package/template/src/pages/-/fonts/[...font].ts

@@ -0,0 +1,50 @@
+import fs from "node:fs/promises";
+import type { APIRoute } from "astro";
+import {
+  type DocsFontFile,
+  getSelectedDocsFontFiles,
+} from "../../../lib/font-css";
+import { getConfig } from "../../../lib/validation";
+
+async function getSelectedFontFileMap(): Promise<Map<string, DocsFontFile>> {
+  const config = await getConfig();
+  return new Map(
+    getSelectedDocsFontFiles(config.theme).map((fontFile) => [
+      fontFile.routePath,
+      fontFile,
+    ]),
+  );
+}
+
+export async function getStaticPaths() {
+  const selectedFontFiles = await getSelectedFontFileMap();
+
+  return Array.from(selectedFontFiles.values(), (fontFile) => ({
+    params: {
+      font: fontFile.routePath,
+    },
+    props: {
+      fontFile,
+    },
+  }));
+}
+
+export const GET: APIRoute = async ({ params, props }) => {
+  const selectedFontFiles = await getSelectedFontFileMap();
+  const fontFile =
+    (props.fontFile as DocsFontFile | undefined) ??
+    selectedFontFiles.get(params.font ?? "");
+
+  if (!fontFile || !selectedFontFiles.has(fontFile.routePath)) {
+    return new Response("Font not found.", { status: 404 });
+  }
+
+  const fontBytes = await fs.readFile(fontFile.sourcePath);
+
+  return new Response(fontBytes, {
+    headers: {
+      "Cache-Control": "public, max-age=31536000, immutable",
+      "Content-Type": fontFile.contentType,
+    },
+  });
+};

package/template/src/pages/404.astro

@@ -17,7 +17,7 @@ import Layout from "../layouts/Layout.astro";
       404
     </p>
     <h1
-      class="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50"
+      class="rd-document-heading text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50"
     >
       Page not found
     </h1>
@@ -35,7 +35,7 @@ import Layout from "../layouts/Layout.astro";
       </button>
       <a
         href={withBasePath("/")}
-        class="inline-flex items-center justify-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] border border-border bg-linear-to-b from-neutral-900/85 to-neutral-900 px-4 py-2 text-sm font-[350] text-white shadow-sm transition hover:opacity-95 dark:from-neutral-100 dark:to-neutral-200 dark:font-[450] dark:text-neutral-950"
+        class="inline-flex items-center justify-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] border border-border bg-linear-to-b from-neutral-900/85 to-neutral-900 px-4 py-2 text-sm font-normal text-white shadow-sm transition hover:opacity-95 dark:from-neutral-100 dark:to-neutral-200 dark:font-medium dark:text-neutral-950"
       >
         <Icon name="lucide:house" class="size-4" />
         Take me home

package/template/src/styles/global.css

@@ -23,10 +23,27 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
 
-  --font-sans: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(
+    --rd-font-text,
+    "Google Sans Variable",
+    ui-sans-serif,
+    system-ui,
+    sans-serif
+  );
+  --font-heading: var(--rd-font-heading, var(--font-sans));
   --font-mono:
-    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+    var(
+      --rd-font-code,
+      "Geist Mono Variable",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    );
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -116,7 +133,7 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-sans text-foreground;
   }
 }
 
@@ -169,6 +186,11 @@
   --tw-prose-invert-td-borders: var(--color-neutral-700);
 }
 
+.rd-document-heading,
+.prose-rules > :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-heading);
+}
+
 .dark .prose-rules {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);

package/template/src/styles/geist-mono.css

@@ -1,33 +0,0 @@
-/* geist-mono-cyrillic */
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("../assets/fonts/geist-mono/cyrillic.woff2") format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* geist-mono-latin-ext */
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("../assets/fonts/geist-mono/latin-ext.woff2") format("woff2");
-  unicode-range:
-    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
-    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* geist-mono-latin */
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("../assets/fonts/geist-mono/latin.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
-    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

package/template/src/styles/google-sans-flex.css

@@ -1,143 +0,0 @@
-/* google-sans-flex-canadian-aboriginal */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/canadian-aboriginal.woff2") format("woff2");
-  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+1400-167F, U+18B0-18F5, U+25CC, U+11AB0-11ABF;
-}
-
-/* google-sans-flex-cherokee */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/cherokee.woff2") format("woff2");
-  unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323-0324, U+0330-0331, U+13A0-13FF, U+AB70-ABBF;
-}
-
-/* google-sans-flex-math */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/math.woff2") format("woff2");
-  unicode-range:
-    U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330,
-    U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
-    U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047,
-    U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF,
-    U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
-    U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321,
-    U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7,
-    U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
-    U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
-}
-
-/* google-sans-flex-nushu */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/nushu.woff2") format("woff2");
-  unicode-range: U+2003, U+3000, U+3002, U+4E00, U+FE12, U+16FE1, U+1B170-1B2FB;
-}
-
-/* google-sans-flex-symbols */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/symbols.woff2") format("woff2");
-  unicode-range:
-    U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192,
-    U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A,
-    U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF,
-    U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
-    U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315,
-    U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
-    U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3,
-    U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449,
-    U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF,
-    U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB,
-    U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610,
-    U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC,
-    U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
-    U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB,
-    U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F,
-    U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
-}
-
-/* google-sans-flex-syriac */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/syriac.woff2") format("woff2");
-  unicode-range:
-    U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C,
-    U+061F, U+0621, U+0640, U+064B-0655, U+0660-066C, U+0670, U+0700-074F, U+0860-086A, U+1DF8, U+1DFA,
-    U+200C-200F, U+25CC, U+2670-2671;
-}
-
-/* google-sans-flex-tifinagh */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/tifinagh.woff2") format("woff2");
-  unicode-range: U+02C7, U+0301-0302, U+0304, U+0306-0307, U+0309, U+0323, U+0331, U+200C-200D, U+202E, U+25CC, U+2D30-2D7F;
-}
-
-/* google-sans-flex-vietnamese */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/vietnamese.woff2") format("woff2");
-  unicode-range:
-    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
-    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-
-/* google-sans-flex-latin-ext */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/latin-ext.woff2") format("woff2");
-  unicode-range:
-    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
-    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* google-sans-flex-latin */
-@font-face {
-  font-family: "Google Sans Flex";
-  font-style: normal;
-  font-weight: 1 1000;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url("../assets/fonts/google-sans-flex/latin.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
-    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}