For Web Developers — Speed & Compatibility
Every millisecond matters. LetterLab's font delivery stack is engineered to keep your Largest Contentful Paint under 2.5 s and your CLS at 0.00.
Sub-second font loading, zero layout shift
Our CDN serves pre-compressed WOFF2 payloads with Brotli encoding, typically 18–24 KB per weight. Combined with font-display: swap and preload hints injected automatically, browsers render fallback text instantly and swap in the final typeface within 300 ms on a 4G connection.
WOFF2 First, Always
Every LetterLab family ships with WOFF2 as the primary format. Legacy WOFF and TTF variants are included only when you explicitly request backward compatibility for IE 11 or older Android WebViews. On average, WOFF2 reduces glyph data by 30 % compared to uncompressed TTF — a 12 KB savings per weight that compounds across multi-weight projects.
Automatic Preload & Prefetch
The embed script injects <link rel="preload"> tags for the font files matching your specified weights and subsets. Critical-fonts are preloaded in the head; secondary weights are prefetched after the first paint. No manual <link> editing required — the snippet handles it based on the JSON config you pass in.
CLS Guardrails Built In
LetterLab's CSS delivers reserved line-height, font-size, and letter-spacing values that match the loaded font's metrics, preventing the vertical jump that inflates Cumulative Layout Shift. Our internal test suite verifies that CLS contribution from font swap stays below 0.005 on Chrome DevTools Lighthouse across 400 %, 100 %, and 33.33 % zoom levels.
Lazy Loading Beyond the Fold
Fonts used only in modals, footers, or below-the-fold sections are lazy-loaded via IntersectionObserver. The embed script exposes an init() method so you can trigger font activation exactly when the viewport nears the relevant DOM node — keeping the initial payload lean and the TTI (Time to Interactive) unaffected.
Every format your stack demands
We don't make you choose between modern efficiency and broad support. Each LetterLab family is compiled into a complete format matrix so you can target any browser, any framework, any constraint.
WOFF2 (Primary)
Brotli-compressed, variable-axis aware. Supports named instances and full axes for variable fonts. Supported by Chrome 36+, Firefox 49+, Safari 13.1+, Edge 79+, and every modern mobile browser. This is the format that ships by default.
WOFF (Fallback)
Deflate-compressed legacy format for Safari < 13.1 and older EdgeHTML engines. Only included when your project config sets "legacySupport": true, adding roughly 8 KB per weight to the total payload.
Variable Font Axis Support
LetterLab variable fonts expose standard axes (weight, width, slant) plus custom optical-size and grade axes where applicable. The CSS font-variation-settings declaration works out of the box, and our playground lets you preview axis ranges before committing to a subset.
Subset & Unicode Range Control
Define exact Unicode ranges in your embed config — Latin, Latin Extended, Greek, Cyrillic, or custom character sets. The CDN returns a subsetted WOFF2 containing only the glyphs you specified, often cutting file size by 60–80 % for single-language projects.
Drop into any workflow, ship with confidence
Whether you're wiring up a Next.js SSR app, a static Astro site, or a legacy WordPress theme, LetterLab's embed layer adapts to your stack without forcing a framework migration.
Zero-JS CSS-Only Mode
Import the @letterlab/css package via npm and reference fonts through standard @font-face rules. No runtime script, no network call beyond the font files themselves. Ideal for static sites, PWAs, and environments where JavaScript execution is restricted or deferred.
React & Next.js Integration
The @letterlab/react package provides a FontProvider component that preloads fonts during server-side rendering and hydrates them on the client. next/font compatibility mode is built in — swap Google Fonts for LetterLab families without changing your next.config.js.
Vite & Webpack Loaders
Our official Vite plugin (vite-letterlab) and Webpack loader (letterlab-loader) inline font references during the build, hash filenames for cache busting, and generate the preload hints automatically. Tree-shaking removes unused weights from the final bundle.
Analytics & Performance Dashboard
Every embed comes with a project dashboard showing font load times, cache-hit ratios, and CLS contribution across your domains. Set up alerts when a new font file exceeds your performance budget — for example, flag any WOFF2 over 30 KB so you can audit your subset configuration.