Web Performance•5 min read•Updated
Web Font Optimization: Subsetting, WOFF2 and Preventing Layout Shift
Script fonts are heavy and load late. A few small changes stop them from slowing your pages down or making the layout jump.
Editorial team · First published .
Quick answer
To load a decorative web font quickly: serve it as WOFF2, subset it to the characters you actually use, preload the file in your HTML head, and set font-display: swap with a fallback font sized to match. Together these cut file size and prevent layout shift (CLS).
Why script fonts need extra care
Calligraphy fonts have a lot of curve points and kerning data, so they tend to be bigger than plain text fonts. Load one late and the browser either hides the text until it arrives (FOIT) or shows a fallback and then swaps it, which makes the page jump (CLS). Both hurt Core Web Vitals.
Use WOFF2 and subset it
WOFF2 is compressed and every modern browser supports it. It usually comes out 30–50% smaller than the same font as .ttf. If your page only uses basic Latin letters, numbers and punctuation, subsetting (removing glyphs you don't need) can shrink it further.
Check the font's license first: some licenses don't allow converting or modifying the file. That includes the free Birds of Paradise demo, which isn't licensed for business websites at all. For your own fonts or OFL fonts, tools like glyphhanger or fonttools pyftsubset do the job.
Preload the font
Tell the browser to fetch the font early by adding a preload link in your <head>:
Example:
<link rel="preload" href="/fonts/your-script-font.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
Use font-display: swap with a matched fallback
font-display: swap shows the text right away in a fallback font. To keep the swap from shifting the layout, choose a fallback with similar width, and fine-tune it with size-adjust.
Example:
@font-face {
font-family: 'Your Script';
src: url('/fonts/your-script-font.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}See your own text in Birds of Paradise
Preview names and words, or export them as an SVG for Cricut, Silhouette or a tattoo stencil.