ci: Fix fonts in Percy - #5664
Merged
Merged
Conversation
Percy re-renders snapshots in its own browsers, so the woff2 files this repo ships must be the only way a Plex face can resolve there: - Drop the local() sources from every @font-face. A local() match in Percy's render environment (or in its asset-discovery browser, which would then never request — and never upload — the woff2) substitutes whatever Plex version that machine has installed, producing intermittent font diffs no in-test guard can observe. - Switch font-display from swap to block, so a capture taken while a font is still loading can't paint fallback-font text. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
PERCY_LOGLEVEL=debug records every asset-discovery request per snapshot, so whether each Plex woff2 was captured (or its fetch failed) is visible in the shard log. This distinguishes a renderer that never received the font from one that raced its loading. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a4b1238528
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Contributor
Preview deploymentsHost Test Results 1 files ± 0 1 suites ±0 2h 57m 7s ⏱️ + 13m 8s Results for commit ba27c49. ± Comparison against earlier commit 45a6f27. Realm Server Test Results 1 files ±0 1 suites ±0 14m 0s ⏱️ -23s Results for commit ba27c49. ± Comparison against earlier commit 45a6f27. |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The theme-card acceptance fixture declares Google-hosted fonts, and which of those woff2s Percy's asset discovery captures varies between builds of identical code (one build captured Libre Baskerville and Source Code Pro, the next only Source Code Pro). A snapshot missing a font renders its fallback, so the same page flips between fonts across builds. Disallowing the Google Fonts hostnames makes the fallback the deterministic, always-rendered choice. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This stylesheet ships to production, where block hides all Plex text for up to the block period on a cold or slow load; swap shows readable fallback text immediately. Percy determinism doesn't need block: with the local() sources gone, asset discovery captures the woff2s on every snapshot, and Percy's renderer waits for captured fonts to load before capturing, so a swap-period fallback paint never reaches a screenshot. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Percy attaches a resource to a snapshot only when the discovery browser's request for it reaches the Percy proxy. The browser is reused across a shard's snapshots, and Chrome's HTTP cache satisfies repeat woff2 requests internally, so only the first snapshot in a shard carried the fonts; later snapshots uploaded without them and rendered fallback text. Whether a given snapshot had fonts depended on its position in the shard's test order, which is why font diffs came and went between builds. Disabling the browser cache routes every request through the proxy; Percy's own response cache still avoids refetching from the test server. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The comments claimed these waits decide which fonts Percy renders, so the documented response to a font difference was to strengthen them. Percy re-renders a serialized copy of the page in its own browsers, where fonts come from the snapshot's captured resources — the waits here cannot influence that. They still matter for layout that this browser measures and serializes, notably Monaco's character-width offsets, so the code stays and the rationale now says so, and points at the discovery settings that do govern captured fonts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Removing them was aimed at Percy determinism, but Percy's asset discovery runs in a Chromium on the CI runner and its renderers use only the resources a snapshot captured — neither had IBM Plex installed for a local() name to match, and the font differences we chased are fully accounted for by the discovery browser's font cache. That leaves no Percy justification for the change, while the cost to production was real: users with IBM Plex installed would download the bundled files and see a swap-period flash they don't have today. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
lukemelia
approved these changes
Aug 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This makes changes for font rendering stability in Percy snapshots. I had four runs in a row with no diffs!
disable-cache: Claude found that within a shard, only the first snapshot was fetching fonts, despite each fetching CSS. While we didn’t fully figure out what’s going wrong here, Claude’s theory is that it relates to Chromium’s caching; if a snapshot came later in the stack and Chromium had already cached it, Percy’s resource interception didn’t work, so when the snapshots were rendered they’d be missing the font. This added <1s per shard and produced the most increased stability.disallowed-hostnameslets us block Google Fonts when card definitions use them; we aren’t testing the appearance of cards themselves and they were loading unreliably, so this just excludes them.debug logging for Percy: having this on let Claude find that font caching was the source of instability; leaving it on only adds ≈3% log length and will make for easier debugging if instability returns.