Next.js: Preload Self-Hosted fonts from node_modules

In my Next.js application, I want to preload my fonts that are located in the node_modules.

In one of my design system's CSS package, I have a css file with

/* FONT */
@font-face {
    src: url("TT-Interphases-Var-Roman.woff2") format("woff2-variations");
    font-family: "TT Interphases Variable";
    font-style: normal;
    font-display: swap;
}

The font is located in the same folder.

In my _app, I load my main css file

import "./main.css";

function App() {

And my main.css file imports my design's system css

@import "~@orbit-ui/css";

The font loads correctly, but I see it flickers when I first load my page. I want to preload that font in order to prevent the flickering.

However I have no way in _document to target that font. The font file is moved to .next/static/media with an hash in the name : TT-Interphases-Var-Roman.4772f5e4.woff2.

It works fine if i preload my font like this :

<link 
    rel="preload"
    href="_next/static/media/TT-Interphases-Var-Roman.4772f5e4.woff2"
    as="font"
    type="font/woff2"
    crossOrigin=""
/>

but if i rebuild my app, the hash in the name will change.

Is there a better way to reference my font's location?