Embed font hoping that this will make the visual tests reproducible

tests/README.md

@@ -38,7 +38,7 @@ To enable lightweight, reproducible, and offline executions, tests rely on the f
 *   **[fixtures/embedded_frame.html](fixtures/embedded_frame.html)**: HTML template for serving cross-origin iframe wrapper mockups virtually to the browser container.
 *   **[global.d.ts](global.d.ts)**: TypeScript declarations defining window overrides (like AI registration pointers `window.__registeredTools`) to bypass compiler warnings.
 *   **[helpers.ts](helpers.ts)**: Unified routing utilities:
-    *   `blockTracking()`: Intercepts and halts metrics and analytical HTTP queries during spec executions.
+    *   `setupHermeticEnvironment()`: Intercepts and halts metrics/analytical queries and embeds local baseline fonts during spec executions.
     *   `setupGedcomRoute()`: Re-routes standard genealogy payload network paths directly to load standard local datasets on-the-fly (`src/datasource/testdata/test.ged`).
 *   **[tsconfig.json](tsconfig.json)**: Typecheck preferences custom to the Playwright runner environment to avoid compilation type collisions.
 *   **`[spec_name]-snapshots/`**: Directory structure containing expected baseline references and image comparison files.

tests/details_visual.spec.ts

@@ -1,11 +1,11 @@
 import {expect, test} from '@playwright/test';
 import dedent from 'dedent';
 import * as fs from 'fs';
-import {blockTracking, mockGedcomResponse, waitForFonts} from './helpers';
+import {mockGedcomResponse, setupHermeticEnvironment, waitForFonts} from './helpers';
 
 test.describe('Details panel visual validation @visual', () => {
   test.beforeEach(async ({page, context}) => {
-    await blockTracking(context);
+    await setupHermeticEnvironment(context);
     await page.goto('/');
     await waitForFonts(page);
   });

tests/helpers.ts

@@ -2,12 +2,49 @@ import {BrowserContext, Page} from '@playwright/test';
 import * as fs from 'fs';
 
 /**
- * Blocks external tracking services (like Google Analytics and Google Tag Manager)
- * to guarantee a hermetic and fast test environment.
+ * Sets up a hermetic test environment by blocking external tracking services
+ * and intercepting Google Fonts to serve static embedded fonts locally.
  */
-export async function blockTracking(context: BrowserContext): Promise<void> {
+export async function setupHermeticEnvironment(context: BrowserContext): Promise<void> {
   await context.route('**/*google-analytics.com/**', (route) => route.abort());
   await context.route('**/*googletagmanager.com/**', (route) => route.abort());
+
+  // Intercept Google Fonts stylesheet requests to serve a deterministically embedded local font.
+  await context.route('**/fonts.googleapis.com/css2**', async (route) => {
+    const cssContent = `
+      @font-face {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: block;
+        src: url('http://localhost:3000/test-fonts/montserrat.woff2') format('woff2');
+      }
+      @font-face {
+        font-family: 'Montserrat';
+        font-style: italic;
+        font-weight: 100 900;
+        font-display: block;
+        src: url('http://localhost:3000/test-fonts/montserrat.woff2') format('woff2');
+      }
+    `;
+    await route.fulfill({
+      status: 200,
+      contentType: 'text/css',
+      headers: {'Access-Control-Allow-Origin': '*'},
+      body: cssContent,
+    });
+  });
+
+  // Intercept requests for the locally embedded test font and serve the static binary.
+  await context.route('**/test-fonts/montserrat.woff2', async (route) => {
+    const fontBuffer = fs.readFileSync('tests/fixtures/montserrat.woff2');
+    await route.fulfill({
+      status: 200,
+      contentType: 'font/woff2',
+      headers: {'Access-Control-Allow-Origin': '*'},
+      body: fontBuffer,
+    });
+  });
 }
 
 /**
@@ -38,7 +75,7 @@ export async function setupGedcomRoute(context: BrowserContext): Promise<void> {
   );
 
   await mockGedcomResponse(context, gedcomContent);
-  await blockTracking(context);
+  await setupHermeticEnvironment(context);
 }
 
 /**

tests/intro.spec.ts

@@ -1,9 +1,9 @@
 import {expect, test} from '@playwright/test';
-import {blockTracking} from './helpers';
+import {setupHermeticEnvironment} from './helpers';
 
 test.describe('Intro page', () => {
   test.beforeEach(async ({page, context}) => {
-    await blockTracking(context);
+    await setupHermeticEnvironment(context);
     await page.goto('/');
   });
 

tests/intro_visual.spec.ts

@@ -1,9 +1,9 @@
 import {expect, test} from '@playwright/test';
-import {blockTracking, waitForFonts} from './helpers';
+import {setupHermeticEnvironment, waitForFonts} from './helpers';
 
 test.describe('Intro page visual validation @visual', () => {
   test.beforeEach(async ({page, context}) => {
-    await blockTracking(context);
+    await setupHermeticEnvironment(context);
     await page.goto('/');
     await waitForFonts(page);
   });