# Preload Fonts

**MUST** · **ID:** `performance-preload-fonts` · **Category:** performance
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-preload-fonts

> MUST: Preload fonts for critical text to avoid flash & layout shift

Preload critical fonts to avoid flash and layout shift

Font files take time to download, causing FOUT (flash of unstyled text) or FOIT (flash of invisible text). Preload critical fonts used for above-the-fold content using <link rel="preload"> to load them as early as possible.

## Bad — do not do this

`performance-preload-fonts-bad`

```tsx
export function PreloadFontsBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2">Custom Font Heading</h3>
        <p className="text-sm text-muted-foreground">
          When fonts aren't preloaded, you may see a flash of unstyled text (FOUT) or invisible text (FOIT) while the font downloads.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        No preload causes FOUT/FOIT and layout shift
      </p>
    </div>
  );
}
```

## Good — do this

`performance-preload-fonts-good`

```tsx
export function PreloadFontsGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2">Custom Font Heading</h3>
        <p className="text-sm text-muted-foreground mb-3">
          With font preloading via &lt;link rel="preload"&gt;, fonts load early and text renders immediately with the correct typeface.
        </p>
        <code className="text-xs bg-muted px-2 py-1 rounded block">
          &lt;link rel="preload" href="font.woff2" as="font" crossorigin&gt;
        </code>
      </div>
      <p className="text-xs text-success mt-4">
        Preload eliminates FOUT/FOIT and layout shift
      </p>
    </div>
  );
}
```

## References

- [Preloading Fonts](https://web.dev/articles/optimize-webfont-loading)