feature: custom fonts with preloading

package.json

@@ -43,6 +43,7 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/cloudflare": "^12.0.0-beta.0",
     "@astrojs/sitemap": "^3.1.6",
+    "@fontsource/archivo": "^5.1.0",
     "@nanostores/persistent": "^0.10.1",
     "@rollup/plugin-graphql": "^2.0.3",
     "accept-language-parser": "^1.5.0",

src/assets/fonts.ts

@@ -0,0 +1,42 @@
+// example use of custom fonts. Replace these with your own fonts:
+import archivo400url from '@fontsource/archivo/files/archivo-latin-400-normal.woff2?url';
+import archivo600url from '@fontsource/archivo/files/archivo-latin-600-normal.woff2?url';
+
+// urls above only resolve correctly in production; imports below are for development:
+import '@fontsource/archivo/latin-400.css';
+import '@fontsource/archivo/latin-600.css';
+
+export type Font = {
+  family: string;
+  weight: number;
+  style: string;
+  woff2Url: string;
+}
+
+export const fontFamilyArchivo = 'Archivo, sans-serif';
+
+export const fonts: Font[] = [
+  {
+    family: 'Archivo',
+    weight: 400,
+    style: 'normal',
+    woff2Url: archivo400url,
+  },
+  {
+    family: 'Archivo',
+    weight: 600,
+    style: 'normal',
+    woff2Url: archivo600url,
+  },
+];
+
+export const getFontCss = (font: Font) => {
+  return /* css */`
+    @font-face {
+      font-family: '${font.family}';
+      font-style: ${font.style};
+      font-weight: ${font.weight};
+      src: url('${font.woff2Url}') format('woff2');
+    }
+  `;
+};

src/components/PerfHead/PerfHead.astro

@@ -1,7 +1,22 @@
 ---
 import { datocmsAssetsOrigin, datocmsGraphqlOrigin } from '@lib/datocms';
+import { fonts, getFontCss } from '@assets/fonts';
 
 const preConnectOrigins = [datocmsAssetsOrigin, datocmsGraphqlOrigin];
+const woff2urls = fonts.map((font) => font.woff2Url);
+const criticalCss = fonts.map((font) => getFontCss(font)).join('\n');
 ---
 
 {preConnectOrigins.map((origin) => <link rel="preconnect" href={origin} />)}
+{
+  woff2urls.map((url) => (
+    <link
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      href={url}
+      crossorigin="anonymous"
+    />
+  ))
+}
+<style set:text={criticalCss}></style>

src/components/PerfHead/PerfHead.test.ts

@@ -0,0 +1,40 @@
+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: {} });
+
+  test('pre-connects to origins to speed up following requests', () => {
+    const links = fragment.querySelectorAll('link[rel="preconnect"]');
+    expect(links.length).toBeGreaterThanOrEqual(1);
+    links.forEach((link) => {
+      // expect link's href to be a valid absolute URL:
+      const url = new URL(String(link.getAttribute('href')));
+      expect(url.protocol).toMatch(/https?/);
+    });
+  });
+
+  test('preloads font files for faster font loading and page rendering', () => {
+    const links = fragment.querySelectorAll('link[rel="preload"][as="font"]');
+    expect(links.length).toBeGreaterThanOrEqual(1);
+    links.forEach((link) => {
+      expect(link.getAttribute('type')).toBe('font/woff2');
+      expect(link.getAttribute('href')).toMatch(/\.woff2$/);
+      expect(link.getAttribute('crossorigin')).toBe('anonymous');
+    });
+  });
+
+  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) => {
+      // replace HTML entities with their character equivalents:
+      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'\)/);
+    });
+  });
+});

src/components/PerfHead/README.md

@@ -2,6 +2,14 @@
 
 **Loading instructions for resources on criticial rendering path to improve page loading performance.**
 
+## Features
+
+- Pre-connects to origins to speed up following requests.
+- Preloads font files for faster font loading and page rendering.
+- Inlines font declarations as critical CSS.
+
 ## Relevant links
 
 - [web.dev: Establish network connections early to improve perceived page speed](https://web.dev/articles/preconnect-and-dns-prefetch)
+- [web.dev: Preload web fonts to improve loading speed](https://web.dev/articles/codelab-preload-web-fonts)
+- [Astro docs: inline CSS imports](https://docs.astro.build/en/guides/styling/#raw-css-imports)

src/layouts/Default.astro

@@ -21,6 +21,7 @@ import PreviewModeProvider from '@components/PreviewMode/PreviewModeProvider.ast
 import StructuredData from '@components/StructuredData/StructuredData.astro';
 import SeoHead from '@components/SeoHead.astro';
 import SkipLink from '@components/SkipLink/SkipLink.astro';
+import { fontFamilyArchivo } from '@assets/fonts';
 import '@assets/a11y.css';
 
 interface Props {
@@ -82,7 +83,7 @@ const mainContentId = 'content';
   </body>
 </html>
 
-<style is:global>
+<style is:global define:vars={{ fontFamilyArchivo }}>
   /* very basic reset */
   *,
   *::before,
@@ -93,7 +94,7 @@ const mainContentId = 'content';
   body {
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: var(--fontFamilyArchivo);
   }
   figure {
     margin: 0;