Replace own custom fonts loader with Astro Fonts Api

astro.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, envField } from 'astro/config';
+import { defineConfig, envField, fontProviders } from 'astro/config';
 import cloudflare from '@astrojs/cloudflare';
 import graphql from '@rollup/plugin-graphql';
 import sitemap from '@astrojs/sitemap';
@@ -74,4 +74,15 @@ export default defineConfig({
       exclude: ['msw'],
     }
   },
+  experimental: {
+    // @note this can be moved out of experimental when we updated astro to v6.0
+    fonts: [{
+      name: 'Archivo',
+      cssVariable: '--font-archivo',
+      provider: fontProviders.fontsource(),
+      weights: [400, 600],
+      styles: ['normal'],
+      subsets: ['latin'],
+    }]
+  },
 });

src/layouts/Default.astro

@@ -13,7 +13,6 @@ import SkipLink from '~/components/SkipLink/SkipLink.astro';
 import AppHeader from './AppHeader/AppHeader.astro';
 import PerfHead from './PerfHead/PerfHead.astro';
 import SeoHead from './SeoHead/SeoHead.astro';
-import { fontFamilyArchivo } from '~/assets/fonts';
 import '~/assets/a11y.css';
 
 interface Props {
@@ -65,7 +64,7 @@ const menuItems = data.app?.menuItems ?? [];
   </body>
 </html>
 
-<style is:global define:vars={{ fontFamilyArchivo }}>
+<style is:global>
   /* very basic reset */
   *,
   *::before,
@@ -76,7 +75,7 @@ const menuItems = data.app?.menuItems ?? [];
   body {
     margin: 0;
     padding: 0;
-    font-family: var(--fontFamilyArchivo);
+    font-family: var(--font-archivo);
   }
   figure {
     margin: 0;

src/layouts/PerfHead/PerfHead.astro

@@ -1,10 +1,8 @@
 ---
 import { datocmsAssetsOrigin, datocmsGraphqlOrigin } from '~/lib/datocms';
-import { fonts, getFontFaceDeclaration } from '~/assets/fonts';
+import { Font } from 'astro:assets';
 
 const preConnectOrigins = [datocmsAssetsOrigin, datocmsGraphqlOrigin];
-const woff2urls = fonts.map((font) => font.woff2Url);
-const fontFaceDeclaration = fonts.map((font) => getFontFaceDeclaration(font)).join('\n');
 ---
 
 {preConnectOrigins.map((origin) => <link rel="preconnect" href={origin} />)}
@@ -23,15 +21,4 @@ const fontFaceDeclaration = fonts.map((font) => getFontFaceDeclaration(font)).jo
   });
 </script>
 
-{
-  woff2urls.map((url) => (
-    <link
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      href={url}
-      crossorigin="anonymous"
-    />
-  ))
-}
-<style set:html={fontFaceDeclaration}></style>
+<Font cssVariable="--font-archivo" preload />

src/layouts/PerfHead/PerfHead.test.ts

@@ -1,8 +1,7 @@
-import { describe, expect, test, } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { renderToFragment } from '~/lib/renderer';
 import PerfHead from './PerfHead.astro';
 
-
 describe('PerfHead', async () => {
   const fragment = await renderToFragment(PerfHead, { props: {} });
 
@@ -22,19 +21,26 @@ describe('PerfHead', async () => {
     links.forEach((link) => {
       expect(link.getAttribute('type')).toBe('font/woff2');
       expect(link.getAttribute('href')).toMatch(/\.woff2$/);
-      expect(link.getAttribute('crossorigin')).toBe('anonymous');
+      expect(['anonymous', '']).toContain(link.getAttribute('crossorigin'));
     });
   });
 
   test('inlines font declarations as critical CSS', () => {
     const styleText = fragment.querySelector('style')?.textContent ?? '';
     const fontFaceDeclarations = styleText.match(/@font-face\s*{[^}]*}/g) ?? [];
     expect(fontFaceDeclarations.length).toBeGreaterThanOrEqual(1);
-    fontFaceDeclarations.forEach((declaration) => {
+    // Filter to only actual font file declarations (not optimized fallbacks using local())
+    const urlDeclarations = fontFaceDeclarations.filter((d) =>
+      /src\s*:\s*url\(/.test(d),
+    );
+    expect(urlDeclarations.length).toBeGreaterThanOrEqual(1);
+    urlDeclarations.forEach((declaration) => {
       // replace HTML entities with their character equivalents:
-      const cleanedDeclaration = declaration.replace(/'/g, '\''); 
+      const cleanedDeclaration = declaration.replace(/'/g, '\'');
       // expect font-face declaration to contain woff2 src url:
-      expect(cleanedDeclaration).toMatch(/src\s*:\s*url\('.*\.woff2'\)\s*format\('woff2'\)/);
+      expect(cleanedDeclaration).toMatch(
+        /src\s*:\s*url\(["'].*\.woff2["']\)\s*format\(["']woff2["']\)/,
+      );
     });
   });
 });

src/pages/cms/editor-guide.astro

@@ -1,5 +1,4 @@
 ---
-import { fontFamilyArchivo } from '~/assets/fonts';
 import PerfHead from '~/layouts/PerfHead/PerfHead.astro';
 import { Content } from '../../content/editor-guide.md';
 
@@ -24,7 +23,7 @@ export const prerender = false;
   </body>
 </html>
 
-<style is:global define:vars={{ fontFamilyArchivo }}>
+<style is:global>
   *,
   *::before,
   *::after {
@@ -34,7 +33,7 @@ export const prerender = false;
   body {
     margin: 0;
     padding: 0;
-    font-family: var(--fontFamilyArchivo);
+    font-family: var(--font-archivo);
     background: #ffffff;
     color: #1a1a1a;
   }