The Practical Guide to Optimizing @font-face

Web fonts are one of the easiest places to lose performance—and one of the easiest to fix. Most sites ship multiple formats, oversized files, or unnecessary weights. Here's a compact guide to optimizing your fonts the right way.

1. Use woff2 First (and Preferably Only)

woff2 is the smallest, fastest, and most compressed format.
Unless you must support IE11 (you probably don’t), you can safely drop:

• eot
• svg
• ttf

A clean modern declaration looks like:

@font-face {
  font-family: 'Poppins';
  src: url('Poppins.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

If you still support older environments, fallbacks are fine—but keep them minimal:

@font-face {
  font-family: 'Poppins';
  src: url('Poppins.woff2') format('woff2'),
       url('Poppins.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

2. Only Include the Weights You Actually Use

Many projects include full font families (100–900) when they only use 400 and 600.

Audit your CSS → keep only what you need.

3. Always Use font-display: swap

It eliminates invisible text (FOIT) and improves perceived performance.

font-display: swap;

This ensures text renders immediately using a fallback font, then swaps when the custom font loads.

4. Subset Your Fonts

Most font files include far more glyphs than you need:

• Cyrillic
• Arabic
• Vietnamese
• Symbols
• Full Unicode ranges

If your site uses only Latin characters, subsetting can reduce file sizes by up to 70–90%.

Two great tools:

4.1. Transfonter: https://transfonter.org/

(Upload → subset → download optimized woff2)

4.2. Google Webfonts Helper: https://gwfh.mranftl.com/fonts

(Self-host Google Fonts + get correctly pre-built subsets)

5. Inline Preload for Critical Fonts

For your main UI font, consider preloading:

Final Checklist

• Use woff2 (and fallback to woff)
• Remove eot, svg, and ttf unless required
• Keep only the weights you use
• Always include font-display: swap
• Subset using Transfonter or Google Webfonts Helper
• Preload critical fonts

Small changes → big wins. Typography stays beautiful, performance gets faster, and you ship fewer kilobytes.