Your Cypress component tests render every component in Times New Roman. Why?

## Where an application's fonts actually come from There are two routes, and they behave very differently under a component harness: - **The application's `index.html` head loads them** — a `<link rel="stylesheet">` pointing at a font service, a pair of `<link rel="preconnect">` hints, or an `@import url(...)` inside a `<style>` block. - **A stylesheet declares `@font-face` rules** pointing at local files (`.woff2`, `.woff`, `.ttf`) that the build serves from a public directory. ## Why the mount page has neither Cypress renders components into `cypress/support/component-index.html`, and the scaffolded version of that file has a charset, a viewport meta tag, a title and a root element — nothing else. Nothing from your application's own `<head>` is there unless you put it there. The result is a suite that is subtly wrong rather than obviously broken. A data grid designed at a condensed weight falls back to the browser's default serif, and every measurement built on that font moves with it: row height, column truncation, whether a header still fits, whether Cypress considers an element visible. The component is fine. The page it was mounted into is not the page it was designed for. If the font arrived by the first route, the fix is close to literal: copy the same `<link>` and `@import` lines into the Cypress index file, in the same order, so the head content that the whole application depends on exists in both pages. ## A local font file still has to be served The second route has an extra failure mode. The `@font-face` rule loads, the browser dutifully requests the file, and the request 404s — because the dev server Cypress started is not the server that serves your app in development, and its static-file behaviour belongs to the bundler, not to Cypress: - **Vite**: put the font files in the project's public directory and reference them with root-relative URLs such as `url('/fonts/grid-condensed.woff2')`. Cypress sets Vite's `base` to match `devServerPublicPathRoute` (default `/__cypress/src`), and Vite rewrites root-relative asset URLs accordingly. - **Webpack**: `webpack-dev-server` serves no static directory by default. Either `import` the font from a module so webpack emits it as an asset, or add a `static` entry to the `devServer` section of your webpack config so the directory is served. Icon fonts behave identically and are usually noticed later, because a missing glyph reads as a layout quirk rather than a wrong typeface: buttons keep their labels, and the icon slot renders a tofu box or an unstyled ligature. If your design system ships icons as a font rather than as inline SVG, treat it as a second font to account for, not as part of the first. One knob is worth knowing about and worth leaving alone. `devServerPublicPathRoute` is the URL prefix Cypress uses to serve compiled specs and assets, and Cypress feeds it to Vite's `base`. Changing it is occasionally necessary when an application's own public path must match, but an incorrect value stops specs and assets loading at all, with failures that look nothing like a path problem. ## Diagnosing it in order 1. Open the browser's network panel during the mount and filter for the font request. A 404 means the rule loaded but the file is not being served; **no request at all** means the `@font-face` rule or the `<link>` never reached the page. 2. Read the computed `font-family` on the element. If your family is listed and the text still renders as a fallback, the declaration is present and the file failed. 3. Diff the mount page's `<head>` against the application's `index.html`. Every `<link>`, `@import` and preconnect the app has and the index file lacks is a candidate. 4. Only then look at the component. A font problem is almost never the component's fault. ## What to mirror, and what to leave out - **Mirror** head content the whole UI depends on: font links, icon-font stylesheets, a vendor theme, a normalize sheet loaded by `<link>`. - **Leave out** analytics tags, error-reporting snippets and anything else that phones home. A component run has no business sending page views, and each one adds latency and a network dependency to every spec. - **Do not** paper over a missing font with a test-only `font-family` override in the support file. The suite then passes against a layout no user will ever see, which is worse than a red run. - **Be clear what a correct font buys you.** It makes the mount behave like production for measurement and visibility. It does not turn the render into an approved picture — a styled mount is evidence that the styles compiled and applied, not a baseline image.