Web Typography

字体预加载

使用 link rel="preload" as="font" 优先下载字体，减少 FOUT/FOIT 并改善最大内容绘制（LCP）性能。

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.

Related Terms

WOFF2 FOUT（无样式文字闪烁） FOIT（不可见文字闪烁） font-display CLS（字体相关）

Related Tools

Css-Generator
Try this tool →

Fonts That Illustrate This Concept

Inter
Sans Serif · #5
Source Sans 3
Sans Serif · #43

Learn More

Web Performance
font-display: swap, fallback, optional — Which to Choose

The font-display CSS descriptor controls what users see while fonts load. Each value has tradeoffs — here's how to choose the right one.

 Web Performance
Google Fonts Performance: Speed Tips and Best Practices

Google Fonts is convenient but can slow your site. Optimize loading with display=swap, preconnect hints, self-hosting, and subset loading.

 Web Performance
Web Font Performance: The Complete Optimization Guide

Everything you need to know about font performance — file size, loading strategies, render blocking, and how fonts affect Core Web Vitals.

 Web Performance
Font Preloading: Prioritize Your Most Important Fonts

Use <link rel=preload> to tell the browser which fonts matter most. Reduce FOUT, improve LCP, and understand when preloading helps vs. hurts.
Back to Glossary