A preload starts a resource early, before the browser discovers it through normal stylesheets. That can help a font used immediately, but preloading every weight and language variant competes with more important page resources.

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

Preload with a clear reason

  • Choose the exact font file used by visible text above the fold.
  • Include crossorigin for a cross-origin font request, even when the font is served from the same origin.
  • Do not preload a file that the page never uses or that arrives through a different URL.

Compare before and after

Inspect the network waterfall and verify that the preload is reused rather than downloaded twice. Check text rendering and layout shift as well as the request's start time.

For noncritical faces, a good fallback and font-display strategy are often better than a queue of speculative requests.