Preload the font, and only the one you use above the fold

A preload hint jumps the queue for one resource, and preloading four fonts delays the thing you actually needed first.

<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- crossorigin is REQUIRED even for a same-origin font.
     without it the font is fetched twice: once by the
     preload, once by the CSS. -->

<style>
  @font-face { font-display: swap; /* ... */ }
</style>

The crossorigin requirement is the mistake almost everybody makes, and the symptom is a duplicate request that is easy to miss in a waterfall — fonts are always fetched in anonymous mode, so a preload without it does not match. One font file is the useful limit; a variable font covering the weights is what makes that possible. Preloading everything is the same as preloading nothing, with extra bandwidth.