Font Preloading: Definition & Examples

Font preloading is a performance technique that instructs the browser to download critical font files as early as possible — before the CSS is even parsed — using the <link rel="preload"> tag. Without preloading, fonts are among the latest resources browsers discover, because they only become needed after HTML is parsed, stylesheets are downloaded and parsed, and the render tree is constructed. Preloading short-circuits this discovery chain.

The standard implementation looks like this:

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

The crossorigin attribute is required even for same-origin fonts. Without it, the browser fetches the font twice — once for the preload hint and once when the actual @font-face rule is encountered — effectively wasting the preload entirely. This is one of the most common implementation mistakes.

Preloading works best when combined with a thoughtful font-display strategy:

/* In your CSS */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: optional; /* Best for preloaded fonts */
}

When a font is preloaded and uses font-display: optional, the browser often has the font ready before the first paint, eliminating both FOIT and FOUT entirely. This combination is the gold standard for LCP optimization when text is the Largest Contentful Paint element.

What to preload:

Preload only the fonts used above the fold — typically 1-2 font files maximum. Preloading too many fonts wastes bandwidth competing with other critical resources (HTML, CSS, critical images):

<!-- Good: preload only the primary body font -->
<link rel="preload" href="/fonts/source-sans-3.woff2" as="font" type="font/woff2" crossorigin>

<!-- Avoid: preloading every weight and style -->

Variable fonts reduce preload complexity:

A variable font covers all weights in a single file, meaning one preload hint replaces what previously required four or more separate requests:

<!-- One file for all weights of Roboto Flex -->
<link rel="preload" href="/fonts/roboto-flex.woff2" as="font" type="font/woff2" crossorigin>

For Google Fonts CDN users, font preloading requires knowing the exact file URL ahead of time, which the Google API generates dynamically. This is one practical advantage of self-hosting — you control the file paths and can write reliable preload tags. Alternatively, you can preconnect to Google's font servers to reduce DNS and TLS handshake time:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Preloading is one of the highest-impact, lowest-effort typography performance improvements available. Measuring its effect with Lighthouse or WebPageTest will typically show meaningful reductions in LCP and elimination of font-related layout shifts.