test(regression-test): bundle Lato font for deterministic visual baselines

Author: ToMESSKa

regression-test/cypress/support/e2e.ts

@@ -56,6 +56,10 @@ afterEach(function () {
   cy.location('pathname', { log: false }).then((pagePath) => {
     cy.task('recordMeta', { name, pagePath }, { log: false })
   })
+  // Wait until web fonts have finished loading before capturing. Otherwise the
+  // screenshot can be taken mid-load, when text is still rendered in a fallback
+  // font with different metrics — producing inconsistent, flaky baselines.
+  cy.document({ log: false }).then((doc) => doc.fonts.ready)
   cy.screenshot(name, {
     capture: 'fullPage',
     overwrite: true,

regression-test/package-lock.json

@@ -21,10 +21,11 @@
     "axe-core": "4.12.1",
     "cypress": "15.18.0",
     "cypress-axe": "1.7.0",
-    "typescript": "6.0.3",
-    "http-server": "14.1.1"
+    "http-server": "14.1.1",
+    "typescript": "6.0.3"
   },
   "dependencies": {
+    "@fontsource/lato": "^5.2.7",
     "@instructure/ui": "file:../packages/ui",
     "@instructure/ui-icons": "file:../packages/ui-icons",
     "@instructure/ui-scripts": "file:../packages/ui-scripts",

regression-test/package.json

@@ -24,6 +24,15 @@
 'use client'
 import React from 'react'
 import { Inter } from 'next/font/google'
+// Self-host Lato so InstUI's `LatoWeb, Lato, ...` font stack resolves to a real,
+// bundled font in every environment. Without this the stack falls back to
+// whatever sans-serif the OS provides (Helvetica Neue locally, DejaVu Sans in
+// the Linux CI container), which changes text metrics and makes layout-driven
+// components render at different heights — breaking the visual baseline.
+// InstUI uses weights 300/400/700.
+import '@fontsource/lato/300.css'
+import '@fontsource/lato/400.css'
+import '@fontsource/lato/700.css'
 import './globals.css'
 import { InstUISettingsProvider } from '@instructure/ui/latest'