fix: replace @fontsource imports with Astro Fonts API for font preloading

piotrekwitkowski · web-flow · commit 2b734c0f71f0 · 2026-04-10T05:47:58.000+01:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,9 +1,17 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, fontProviders } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import lit from '@semantic-ui/astro-lit';
 
 export default defineConfig({
   integrations: [lit(), mdx()],
+  fonts: [{
+    provider: fontProviders.fontsource(),
+    name: 'Open Sans',
+    cssVariable: '--font-open-sans',
+    weights: [400, 600, 700],
+    styles: ['normal'],
+    subsets: ['latin'],
+  }],
   site: 'https://cumulus-ui.github.io',
   server: { port: 4321 },
   markdown: {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,8 +1,6 @@
 ---
 import '@cumulus-ui/design-tokens/tokens.css';
-import '@fontsource/open-sans/400.css';
-import '@fontsource/open-sans/600.css';
-import '@fontsource/open-sans/700.css';
+import { Font } from 'astro:assets';
 import { getCollection } from 'astro:content';
 import { displayName } from '@/utils/display-name';
 
@@ -32,6 +30,7 @@ const navItems = components.map(comp => ({
         (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
       if (theme === 'dark') document.documentElement.classList.add('awsui-dark-mode');
     </script>
+    <Font cssVariable="--font-open-sans" preload />
   </head>
   <body>
     <cs-app-layout-toolbar
@@ -96,7 +95,7 @@ const navItems = components.map(comp => ({
 <style is:global>
   body {
     margin: 0;
-    font-family: var(--font-family-base);
+    font-family: var(--font-open-sans, var(--font-family-base));
     color: var(--color-text-body-default);
   }
 
