High-level: Preloading Inter via a bundler URL + Helmet looks good for the main app, and the ambient module declaration for *.woff2?url is the right way to satisfy TS. The Navbar test changes improve isolation and avoid mounting the entire app.

Main gap: Storybook doesn’t render App, so the <Helmet><link rel="preload" ... /></Helmet> in App.tsx won’t run there. Since the PR’s stated goal is stabilizing Storybook/Chromatic snapshots, we should also preload the font in the Storybook environment.

Suggested fix (uses existing HelmetProvider in preview):

// site/.storybook/preview.tsx
import { Helmet } from "react-helmet-async";
import interWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";

const withHelmet: Decorator = (Story) => {
  return (
    <HelmetProvider>
      <Helmet>
        <link
          rel="preload"
          as="font"
          type="font/woff2"
          href={interWoff2}
          crossOrigin="anonymous"
        />
      </Helmet>
      <Story />
    </HelmetProvider>
  );
};

Alternatively, add a preview-head.html with a <link rel="preload">, but using ?url import in code avoids asset-path issues with Vite.

Nice-to-have:

• If we rely on italics anywhere, consider also preloading the italic variable file.
• Keep document.fonts.ready loader (already present) to ensure Chromatic waits for fonts.

If you add the Storybook preload, I’m confident this will address the snapshot variability. Happy to re-review after that change.

@BrunoQuaresma Should the link tag be added to .storybook/preview.tsx instead of App.tsx?

I think it would be useful to preload the Inter font in the app too. Wdyt?

or actually, maybe have both preloads in App and preview.tsx

Good catch! I we don't use the App in Storybook 🤦

also, about the import types: vite provides those types, we just haven't ever enabled them for some reason. 🙃 pr to fix: #19477

@aslilac that makes sense. About the docs you mentioned, I don't see a clear way to make fontsource to work nicely with it. A workaround that came up to my mind was to just copy and paste the font file in the public folder and use it. Wdyt?

Thinking more about that, I don't think it would work since the file location would be in different places.

I think I got it working. I didn't know vite was smart enough to figure out how to bundle static assets from node_modules :)

I think you can even leave off the /node_modules/ bit and just "import it" like you would from typescript

vite is pretty clever 😄

@aslilac I tried, but it does not 😞