Font Optimization
ELI5 — The Vibe Check
Downloading an entire font family is like ordering the complete encyclopedia when you only need Volume F. Font optimization means only grabbing the characters and weights you actually use, so your site doesn't take a coffee break loading pretty letters.
Real Talk
Font optimization involves subsetting fonts to include only needed glyphs, using modern formats like WOFF2, applying font-display strategies, and preloading critical fonts. This reduces render-blocking time and prevents layout shifts.
Show Me The Code
@font-face {
font-family: 'Custom';
src: url('/font.woff2') format('woff2');
font-display: swap;
unicode-range: U+0000-00FF;
}
When You'll Hear This
"We subset the font and dropped 200KB off the initial load" / "Use font-display: swap so text is visible immediately"
Related Terms
FOIT
FOIT is when your browser hides all the text until the custom font loads, like a magician making your content vanish. 'Ta-da! Your heading is...
FOUT
FOUT is when your page shows up in boring system fonts and then — SURPRISE — swaps to the fancy custom font a second later.
Web Font Loading
Web font loading is the art of getting custom fonts to show up without your text doing a magic disappearing act or a jarring costume change mid-sentence.