tl;dr: Use <link rel="preload" href="/assets/atkinson-hyperlegible-regular-102a.woff2" /> to tell the browser it needs to schedule the asset to be downloaded and cached with higher priority.

<link
  rel="preload"
  href="/assets/atkinson-hyperlegible-regular-102a.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

This approach can also be used with as="fetch" to precache API requests, or anything that’s on the critical path when it comes to rendering performance. Use this carefully as it’ll increase load on your backend; so, anything that gets preloaded please ensure it’s actually used to render content to the user.

References