Performance Guide•5 min read
Web Font Optimization: Subsetting, WOFF2 & Preventing Layout Shifts
Best practices for delivering high-performance decorative web fonts with zero Cumulative Layout Shift (CLS) and minimal bandwidth footprint.
Why Font Optimization Matters for Web Performance
Custom calligraphy and script typefaces often contain extensive vector curve coordinates and kerning tables. Loading unoptimized TrueType or OpenType files without preloading can trigger FOIT (Flash of Invisible Text) or CLS (Cumulative Layout Shift), negatively impacting Core Web Vitals and search rankings.
Compressing to WOFF2 and Subsetting Characters
Modern browsers universally support WOFF2 compression (Brotli-based), which typically yields a 30% to 50% file size reduction over raw TTF files. If your application only requires standard Latin characters, numerals, and punctuation, removing unused glyph tables (subsetting) can reduce asset payload from ~150KB to under 35KB.
Preloading Critical Web Fonts
Instruct modern browsers to initiate font asset downloads during HTML parsing by including a preload directive in your <head> tags:
CSS / Implementation Example:
<link rel="preload" href="/fonts/birds-of-paradise.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
Preventing Layout Shifts with font-display: swap
Always define font-display: swap in your CSS @font-face declaration. Pair it with a fallback cursive or serif family with adjusted size-adjust metrics to prevent visible jumping when the primary font finishes rendering.
CSS / Implementation Example:
@font-face {
font-family: 'Birds of Paradise';
src: url('/fonts/birds-of-paradise.woff2') format('woff2'),
url('/fonts/birds-of-paradise.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}Ready to test Birds of Paradise?
Experiment with pairing options in our interactive font previewer.