A site can contain many font files while using only a few in its initial viewport. Preloading every file may compete with more immediately important resources. Start with the font actually rendered in key text.

Inspect which resource supplies a heading or navigation item. A design-system family name does not prove that the browser loaded the intended file; a fallback may be in use.

Describe a matching request

A simplified local preload is:

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

The address and request conditions must match the CSS font definition. Replace href with the path of the WOFF2 file in use and check its licence.

Inspect whether the preload is actually used. An unused-resource warning calls for investigation rather than more preloads. Check language and character coverage: a file needed on one page may be unnecessary elsewhere.

After changing the configuration, test a fresh mobile visit and a longer heading. Inspect line wrapping and layout movement as well as loading order. Fewer font requests are not an improvement if characters disappear or unintended fallback fonts render the text.

Sources