The complete Google Fonts CSS API with measured WOFF2 benchmarks, variable-axis tables, OpenType feature catalogs, subsetting cookbooks, and build-pipeline scripts. From WOFF2 compression to OpenType features, with every documented requirement we could verify against the live API.
References with full tables, real measured benchmarks, and edge-case audits.
Every /css2 parameter and axis tested against the live API. Every URL pattern that returns 400, real WOFF2 sizes, paste-and-decode tool. 16,412-byte limit measured May 2026.
Open referenceReal measured numbers for base64-inlining web fonts: 1.333× raw inflation, gzip recovers within 1% for WOFF2 but inflates TTF by 17%, lightningcss silently drops @font-face rules with whitespace in base64, and atob rejects URL-safe alphabets. Includes a paste-in @font-face validator.
Open referenceReference for unusual TTF/OTF→WOFF2 conversions: TrueType Collections (.ttc) that get rejected, oversized CJK output, colour tables (COLR/sbix/CBDT), variable fonts, corrupt SFNTs, and tier size limits. Grounded in what JAD's wawoff2-based converter actually does.
Open referenceReverse the WOFF2 Brotli wrapper back to an installable TrueType (TTF) or OpenType (OTF) sfnt — entirely in your browser via the wawoff2 WASM module. The tool sniffs the wrapped flavour from the decompressed magic bytes and writes .ttf for TrueType outlines or .otf for CFF/PostScript outlines automatically. No upload, no options to configure.
Open referenceField reference for every way WOFF2 decompression goes sideways: the wOF2 magic-byte gate, mislabelled WOFF/TTF/TTC files, the two distinct error strings (wrong format vs Brotli failure), CFF-vs-TrueType flavour detection, and the metadata that always survives. Maps each symptom to the exact behaviour of the wawoff2-based decompressor.
Open referenceConvert TTF, OTF, WOFF, or WOFF2 fonts to a base64 data URI and a ready-to-paste @font-face block — auto-detected MIME, font-display: swap, quoted url(). Browser-based, no upload.
Open referenceCompress a TTF or OTF font to WOFF2 entirely in your browser with Google's wawoff2 WASM Brotli encoder — no upload, no account. Free tier handles files up to 5 MB; the converter also accepts WOFF and WOFF2 inputs and re-encodes them to WOFF2.
Read guideWrap any TTF, OTF, WOFF, or WOFF2 in a spec-compliant WOFF 1.0 container with per-table zlib compression. Wider browser support than WOFF2 for legacy environments. 100% in-browser — zero bytes uploaded.
Read guideReverse the WOFF2 Brotli wrapper back to an installable TrueType (TTF) or OpenType (OTF) sfnt — entirely in your browser via the wawoff2 WASM module. The tool sniffs the wrapped flavour from the decompressed magic bytes and writes .ttf for TrueType outlines or .otf for CFF/PostScript outlines automatically. No upload, no options to configure.
Read guideConvert TTF, OTF, WOFF, or WOFF2 fonts to a base64 data URI and a ready-to-paste @font-face block — auto-detected MIME, font-display: swap, quoted url(). Browser-based, no upload.
Read guideDrop any font file and reveal its true format from the first 4 bytes. Detects TTF, OTF (CFF), WOFF, WOFF2, TrueType collections, and the Apple 'true' variant, all in your browser.
Read guideConvert TTF or OTF files to the deprecated SVG Font format. Useful for some PDF generators, e-readers, and engines that consume SVG Fonts but not modern WOFF2.
Read guideDrop a variable font and get back a static TTF with the eight variable-only tables removed (fvar, gvar, HVAR, MVAR, VVAR, cvar, STAT, avar). Outlines stay at the default master — for an arbitrary baked instance use fonttools varLib.instancer. Pro-gated, browser-only, no upload.
Read guideTurn a Google Fonts family list into self-hostable @font-face CSS with relative ./woff2/ paths plus a bash curl script that downloads every WOFF2. The generated CSS never touches Google — though generating it does one browser fetch. Stop leaking visitor IPs to fonts.gstatic.com.
Read guideDrop unused glyphs from any TTF, OTF, WOFF or WOFF2 to a named charset (latin, latin-ext, cyrillic, greek, vietnamese, symbols), then compress to WOFF2 for the single biggest font performance win. Runs in your browser via opentype.js — no upload, no install.
Read guideOne-click subset to U+0020–U+007E and U+00A0–U+00FF (Basic Latin + Latin-1 Supplement, 191 codepoints). Covers English, French, German, Spanish, Italian, and most Western European content. Output is always TTF; kerning and OpenType layout features are dropped.
Read guideDrop emoji, dingbat, and Private-Use-Area glyphs (U+1F000–U+1FFFF, U+2600–U+27BF, U+E000–U+F8FF) from a TTF, OTF, WOFF, or WOFF2 in the browser. The tool walks the font's own cmap, keeps every codepoint outside those ranges, and rebuilds a TTF — emoji keep rendering via the OS colour-emoji font.
Read guideDrop the fpgm, prep, cvt, gasp, hdmx, VDMX, and LTSH tables from a TTF/OTF/WOFF/WOFF2 in your browser. Typical 5–20% size cut on heavily-hinted fonts, no visible change on macOS, iOS, modern Linux, and Windows 10+ DirectWrite. Output is always a raw .unhinted.ttf — re-compress to WOFF2 after.
Read guideDrop COLR, CPAL, sbix, SVG, CBDT, CBLC, EBDT, and EBLC tables from chromatic fonts in your browser. The outline glyphs stay intact; the result is a plain monochrome TTF — often far smaller. No upload, no options to fiddle with.
Read guidePaste the exact characters in your wordmark (e.g. "JAD APPS") and get a TTF containing only those glyphs plus .notdef. Built in-browser with opentype.js, so the output is uncompressed TTF — run it through the WOFF2 converter to reach the 1.5–3 KB sizes logos need. Kerning and OpenType features are dropped, which matters for letter-pairs.
Read guideFree browser tool that rebuilds the OpenType name table to keep only the seven Windows-English records browsers and font managers actually read (nameIDs 1, 2, 4, 5, 6, 13, 14) and drops every Mac-platform duplicate and minor-language string. Output is always a TTF; accepts TTF, OTF, WOFF and WOFF2. Reports records before, kept, and dropped so you can see exactly what changed.
Read guideDrop a TTF/OTF/WOFF/WOFF2 and the Ligature Toggler renders your sample text three ways — ligatures off, standard on, discretionary on — in a single self-contained HTML preview, then hands you copy-paste font-feature-settings CSS. It never touches the font binary; toggling is pure CSS, so it is reversible and never corrupts the file.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 and get one JSON record per glyph: index, name, Unicode codepoint, advance width, bounding box, and an upright SVG path you can render. Runs in your browser; nothing uploads.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 and get a JSON dump of the OpenType name records (family, designer, manufacturer, version, copyright, license, license URL) plus units-per-em, glyph count, outline format, and the list of tables present. Decompresses WOFF2 and WOFF in the browser — nothing is uploaded.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 and get a SHA-256 hash of its exact bytes plus four ready-to-paste outputs: the full 64-char hex, an 8-char short id, a cache-busted filename, and an SRI integrity attribute. Computed in your browser with crypto.subtle.digest — 0 bytes uploaded.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 and read every adjusting pair in the legacy kern table, ranked by absolute font-unit value. The auditor enumerates the kern table via opentype.js — GPOS pair-pos and class-based kerning are NOT expanded — and filters zero-value pairs, so you see only the adjustments that actually move glyphs.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 in the browser and get a colour-coded HTML matrix of every Unicode block the font actually covers, scored against all 346 standard blocks (Unicode 17.0.0). Per-block glyph counts, coverage percentages, and a common-web-subset summary — no upload, no JSON, no options to configure.
Read guideExtract the vertical metrics a font carries in its OS/2 and hhea tables — UPM, typo + win + hhea ascender/descender/line-gap, x-height, cap-height — and get a clip-safe line-height plus a copy-paste CSS line. Browser-side, JSON output, no font bytes leave your machine.
Read guideDrop a TTF, OTF, WOFF, or WOFF2 file and get a JSON list of every GSUB and GPOS feature tag the font declares — kern, liga, calt, smcp, ss01–ss20, swsh, tnum — each with a human-readable label and a ready-to-paste font-feature-settings snippet. Runs entirely in your browser; the font is never uploaded.
Read guideCount the real glyph total in any TTF/OTF/WOFF/WOFF2 and project the WOFF2 size after subsetting to the six fixed charsets the analyser checks (Latin, Latin Extended, Cyrillic, Greek, Vietnamese, symbols). See the projection maths, the 1500-byte floor, and how to turn a projection into an exact build with the subsetter.
Read guideBuild one valid @font-face declaration in the browser: pick a family name, base path, weight, style, font-display, optional unicode-range, and which formats (WOFF2/WOFF/TTF) go in the src list. The generator orders the src entries WOFF2 → WOFF → TTF and emits the right format() hints so modern browsers stop at the first file they understand. Generative — no font upload, nothing leaves your machine.
Read guidePaste-ready :root block of typography custom properties: a modular --font-size scale in rem plus fixed --font-weight, --line-height, and --letter-spacing tokens. Pick a family, base size, ratio, and step count; copy the output. Runs entirely in the browser, no upload, no sign-in for the free tool.
Read guideGenerate a full type scale (xs–4xl) using a chosen modular ratio. Output is two CSS variable blocks: a static rem scale and a fluid clamp() scale that interpolates between 320px and 1280px viewports — generated in your browser, no upload required.
Read guideBuild a font-family declaration that uses the best native font on each OS — San Francisco on Apple via -apple-system, Segoe UI on Windows, Roboto on Android. Pick a style and an OS scope; copy the :root variable + body rule. Zero web fonts, instant rendering, no @font-face.
Read guidePaste one font URL per line and get a correct <link rel="preload" as="font" type="..." href="..." crossorigin> tag for each — the MIME type is derived from the file extension. Generative, runs in the browser, no font upload. Drop the output into <head> before the stylesheet so the font fetch starts alongside the HTML parse and shaves 100–500 ms off LCP on cold-cache visits.
Read guideFive font-display values, three real choices. swap for brand-critical headlines, optional for body text that can't tolerate late reflow, fallback as the middle ground. This guide maps each value to its load timeline, the surface it fits, and what actually happens on a slow connection — plus a one-control picker that emits an annotated @font-face skeleton.
Read guideType a min size, a max size, and a viewport range, and get a ready-to-paste clamp() expression that interpolates linearly between the two viewports. rem-based bounds, a vw-driven slope, output rounded to 3 decimals. No font upload — it is a generator.
Read guideFree browser tool that takes your light-mode font-weight, line-height, and letter-spacing and emits a body{} block plus a prefers-color-scheme: dark override that drops weight by 50–100, adds 0.01em of letter-spacing, and adds 0.05 to line-height. No font upload, no sign-in, pure CSS out.
Read guideTTF, WOFF, and WOFF2 all wrap the same SFNT font data — the difference is compression: none, zlib-per-table, and whole-font Brotli with a glyf transform. Compares file size, compression mechanism, magic bytes, browser support, and the right @font-face src ordering for 2026.
Read guideDecision guide for shipping WOFF, WOFF2, or both. Real browser-support floors, file-size deltas (zlib vs Brotli), and the @font-face src ordering that falls back cleanly across every engine.
Read guideWhen base64-inlining a font helps and when it hurts: the fixed 1.333x size penalty, HTTP/2 multiplexing, cacheability, render-blocking CSS, and the rare cases where inlining wins. Measured, not hand-waved.
Read guideTTF and OTF look identical in a file manager but differ at byte zero. Learn which outline format each sfnt magic indicates, what it means for hinting and size, and how to read it yourself.
Read guideWOFF2 and TTF wrap the same sfnt data — the difference is the wire format and where it is accepted. A per-medium decision matrix: web (WOFF2), desktop install (TTF/OTF), PDF and native mobile (TTF/OTF), email (system fallback). Plus the real size trade-off and which direction to convert.
Read guideWhy SVG Fonts existed, why they died, and where they still live in 2026. Historical context for tooling authors and font librarians dealing with legacy assets.
Read guideVariable fonts win on bytes above roughly three weights; static wins below. The full decision: gvar overhead, browser support, render-blocking, caching granularity, and exactly what JAD's freezer can and can't produce when you choose static.
Read guideWhere self-hosting Google Fonts actually wins (third-party connection setup, cache partitioning) and where the CDN still wins (slow origins). DNS, TLS, TTFB, LCP, and how to generate the self-hosted CSS in one step.
Read guideTwo levers for lighter webfonts: bake a subset into one file, or split fonts by CSS unicode-range so each visitor downloads only their language. How they combine, how Google Fonts does it, and the duplicate-glyph trap to avoid.
Read guideDecide between Latin Basic, Latin-1 Supplement, Latin Extended-A, and Latin Extended-B for your audience. Per-language coverage map with the exact codepoint ranges JAD's latin and latin-ext presets cover, and file-size implications.
Read guideWhy TrueType hinting was essential in 1995 and what each rasteriser does with hints today: GDI/ClearType reads them, DirectWrite and CoreText largely ignore them, FreeType depends on build flags. Decide whether stripping fpgm/prep/cvt is safe for your audience.
Read guideThe four mainstream ways colour fonts encode chromatic glyphs — COLRv0/v1 (Microsoft vector), sbix (Apple bitmap), CBDT/CBLC (Google bitmap), and OpenType-SVG — with browser support, file-size cost, and which tables a remover actually drops.
Read guideTwo ways to shrink a font: keep an exact character list (Character Whitelist Builder) or keep a Unicode range (Font Subsetter / Latin Filter). Both share JAD's in-browser opentype.js engine and output TTF — they differ only in how you specify what to keep. This decides which fits logos, body text, and multilingual content.
Read guideWhy a single font ships 50+ name records for the same handful of strings, decoded coordinate by coordinate: platformID (Windows/Mac/Unicode), encodingID, and languageID. Explains the (3, 1, 0x409) combination browsers read, why Mac records are legacy, and which records the JAD cleaner keeps vs drops.
Read guideHow ligatures evolved from a 15th-century casting workaround into OpenType feature tags (liga, dlig, calt, hlig, rlig) you flip with one line of CSS. What each class means, why it exists, and how to see it for any font with the in-browser Ligature Toggler.
Read guideThree ways to cache-bust web fonts with a SHA-256 fingerprint: content-hashed filenames (recommended), query-string versioning (fragile), and SRI integrity (security, not caching). What each does, why query strings fail on some CDNs, and how the JAD Fingerprinter's cache_busted_filename and sri_attribute map onto each.
Read guideFonts store kerning three ways: the legacy kern table (simple pairs), GPOS pair-pos lookups, and GPOS class-based lookups. This explains each encoding, why browsers prefer GPOS, and exactly why the Kerning Pair Auditor — which reads only the kern table — returns zero pairs for most modern fonts.
Read guideGlyph Count tells you how many glyphs a font has and how small it subsets; the Coverage Map tells you which scripts those glyphs actually cover across 346 Unicode blocks. Use both: count for bytes, coverage for language fitness. A side-by-side of what each tool answers and when.
Read guideStylistic sets (ss01–ss20), stylistic alternates (salt), swashes (swsh), and titling (titl) are the design-side OpenType features that change letter shapes. What each one is, how to find which a font ships using the Features Inspector, and the exact CSS to switch them on.
Read guideGlyph count projects size; the coverage map (scored against 346 real Unicode blocks) tells you language fitness. They answer different questions — here's exactly what each measures, why the numbers don't line up, and how to use both for a one-minute go/no-go.
Read guideThe format() hint after each src URL tells the browser which file type it points to, so the browser can skip formats it can't render before downloading them. This explains every hint string, why `truetype` (not `ttf`) is correct, what happens when you omit hints, and exactly which three hints the @font-face Generator emits — plus the variation hints it does not.
Read guideThree approaches to typography tokens — native CSS custom properties, Sass variables, Less variables — compared on runtime mutation, theming, build cost, and scoping. This generator emits native CSS custom properties; here's why that's the modern default and how to migrate.
Read guideModular scales (base × ratio^n) give instant harmony; arbitrary sizes give per-role control. Where each wins by design-system maturity, plus exactly what the JAD scale builder emits so you know what a modular baseline buys you.
Read guidePerformance-first sites use a zero-byte system stack; brand-first sites load a custom web font (50-200 KB and a FOUT/FOIT to manage). Decision framework, the cost of each, and the hybrid most teams land on — system body, brand headline.
Read guidepreload starts a high-priority download for the current page; prefetch queues a low-priority download for a likely next page; preconnect opens the DNS+TLS handshake to a host without downloading. This reference maps each to a real font scenario, shows the exact syntax, and notes that the JAD builder emits rel="preload" tags only — prefetch and preconnect are hand-written.
Read guideFlash of Unstyled Text (FOUT) vs Flash of Invisible Text (FOIT): what each looks like, which font-display value produces which, and why FOUT is almost always the lesser evil. Includes a value-to-behaviour map and a one-control picker that recommends the right value for your surface.
Read guideTwo ways to make type responsive: a single clamp() that interpolates smoothly, or media queries that jump at breakpoints. Real tradeoffs in design quality, CSS size, testability, and CLS — with the exact clamp() this tool produces for each pattern.
Read guideHalation is the perceived blooming of light pixels on a dark background that makes thin strokes look thicker. Why it happens, why OLED makes it worse, and the precise weight/letter-spacing/line-height deltas (−50 to −100 weight, +0.01em, +0.05) that restore equivalent density.
Read guideWire WOFF2 conversion into a Node prebuild, a Vite/Next.js pipeline, or GitHub Actions so every deploy ships the smallest font bytes — using the same wawoff2/woff2_compress engine the browser tool runs, or the JAD runner's local HTTP API for a no-toolchain option.
Read guideConvert every TTF/OTF in your design system to WOFF in one command. Node + pako (the same zlib logic the browser tool uses) or the JAD local runner HTTP API — idempotent, deterministic, CI-guardable.
Read guideAdd a magic-byte format check to CI to catch corrupt downloads, mislabelled files, and stray TTC commits before they ship. The same 5-byte detection logic the JAD tool uses, runnable in any Node CI.
Read guideThe browser tool decompresses one file at a time; for hundreds of fonts, script it. A Node walk using the wawoff2 WASM module (the same module the browser tool uses), with TTF/OTF flavour detection, idempotent skipping, concurrency limits, and a runner-API alternative for a no-Python pipeline.
Read guideInline fonts as base64 at build time, never at runtime. Node, openssl, and bundler recipes for converting WOFF2 to single-line data URIs and injecting them into CSS or email templates — minifier-safe and CSP-aware.
Read guideServe variable fonts to modern browsers and static fallbacks to legacy ones. Covers the @font-face src ordering, the fonttools varLib.instancer step for real per-weight outlines, the JAD runner HTTP API for default-master freezes, and a CI size gate.
Read guideScript the Google Fonts → self-host conversion in CI: build the css2 URL, fetch with a Chrome User-Agent (so you get WOFF2 not TTF), download every gstatic WOFF2, rewrite src to local paths, pin SHA-256 hashes. Includes the JAD runner API equivalent.
Read guideGenerate SVG Fonts in CI for downstream PDF generation libraries that prefer them. Pure-JS Node script using the JAD logic — no Python, no native binaries.
Read guideWire font subsetting into CI so every deploy ships the smallest possible WOFF2 — with the glyphs you use and the kerning/ligatures you need preserved. Covers fonttools/pyftsubset, glyphhanger, subfont, and the JAD runner's HTTP API for a no-Python option.
Read guideRun a Latin subset across every weight of your font family in one command. A Node + opentype.js script reproduces the in-browser tool's exact behaviour (U+0020–U+00FF, TTF out, layout tables dropped), plus the pyftsubset alternative when you need kerning preserved.
Read guideWire emoji-glyph removal into CI so every deploy ships emoji-free brand fonts that delegate to the OS emoji renderer. Covers the layout-preserving hb-subset approach, a pure-JS opentype.js script, and the JAD runner endpoint — with the kerning trade-off spelled out.
Read guideWire fpgm/prep/cvt removal into a build step so every deploy ships unhinted fonts. The browser tool is single-file; for CI, mirror its table-removal logic in Node, then compose with subsetting and WOFF2 compression. Honest about what is and isn't reproducible.
Read guideAutomate monochrome font generation in CI: drive the JAD Colour Table Remover via the local runner HTTP API, or replicate the same eight-table binary surgery in a Node step — then re-compress to WOFF2. Idempotent, dependency-light, and font bytes stay on your machine.
Read guideWire exact-character subsetting into a marketing site build: extract the unique characters from your rendered hero copy, subset to just those glyphs, and emit a micro-font every deploy. Covers a Node + opentype.js script that matches the in-browser tool byte-for-byte, plus the kerning-preserving pyftsubset alternative and the JAD runner API.
Read guideWire OpenType name-table cleanup into CI so every font weight is slimmed automatically. Covers the JAD API/runner shape (GET schema, paired @jadapps/runner, no uploads), a faithful fontTools/Python port of the exact keep-list the tool uses, and where to slot it in a TTF -> WOFF2 build.
Read guideDrive the Ligature Toggler from CI on paid tiers via the local runner — POST a font + sample text to 127.0.0.1:9789/v1/tools/ligature-toggler/run and get the preview HTML back. Pair it with opentype-features-inspector to detect which features each font actually defines and fail the build when expectations break.
Read guideReproduce the Glyph Inspector's opentype walk in a Node script to emit icon design tokens on every CI run. Same per-glyph shape — index, name, unicode, advance, bbox, svgPath — driven straight from the font binary.
Read guideWire font metadata extraction into your build so every font's name records, version, glyph count, and table list land in source control as JSON. Pure-JS via opentype.js — no Python, no fonttools — or drive the browser tool locally through the @jadapps/runner so binaries never leave your network.
Read guideWire SHA-256 fingerprinting into CI so it matches the JAD Fingerprinter exactly. A dependency-free Node script that content-hashes every font in a design system, emits cache-busted filenames and SRI attributes, and writes a manifest your templates consume. Also covers running the tool via the @jadapps/runner.
Read guideCatch kern-table regressions automatically in CI. A Node script reads font.kerningPairs via opentype.js (legacy kern table only — GPOS is not enumerated), baselines the non-zero pair count, and fails the build when it drops unexpectedly. Includes the JAD runner HTTP-API pattern.
Read guideWire Unicode-block coverage into CI to catch foundry updates that silently drop language support. Replicate the Coverage Map's block-bucketing logic with opentype.js in Node, diff each font against a committed baseline, and fail the build when a critical-locale block regresses.
Read guideTurn the font metrics this analyser reports — UPM, ascender, descender, line-gap, x-height, cap-height — into W3C design tokens (line-height, x-height ratio, cap-height ratio) in a CI script. Includes the same opentype.js calls the web tool uses, and the runner API for paid tiers.
Read guideWire OpenType feature inspection into a build or CI step: walk a fonts directory with opentype.js, collect every GSUB/GPOS feature tag, and fail the build when a foundry update drops a feature your design system requires. The browser tool's JSON output (tag, name, in_gsub, in_gpos) maps directly to the script's data shape.
Read guideWire the glyph count analyser into CI through the runner's local HTTP API to fail builds when a font's projection or glyph total drifts past budget. The exact JSON shape, the empty schema, jq snippets, and where to read the real shipped size instead.
Read guideStop hand-maintaining @font-face declarations. Walk your fonts directory at build time, parse each filename into family/weight/style, and emit one canonical block per file — with correct format() ordering and font-display. Do it in plain Node, or drive the JAD @font-face Generator's local runner API so the CSS is byte-identical to the UI's output. Idempotent, CI-friendly.
Read guideThis generator emits a CSS :root block, not JSON. To feed Style Dictionary for cross-platform tokens (CSS, Swift, XML), translate the generated values into a tokens JSON by hand or with a small script. This guide shows the exact mapping and the values to copy.
Read guideDrive the JAD type-scale builder from CI via the runner's local HTTP API. It returns CSS (static rem + fluid clamp()); this guide shows how to call it, parse the rem/px values, and fan them out to other platforms — honestly, since the tool itself only emits CSS.
Read guideEmit native system font stacks from a build script or the JAD runner instead of pasting CSS. POST { sansOrSerif, targetOS } to the local runner, or treat the curated stacks as static data and fan them out to CSS, Swift, and Kotlin tokens in CI.
Read guideContent-hashed font filenames make hand-written <link rel=preload> tags drift out of sync after every build. Wire the JAD preload builder into CI: feed your manifest's critical font URLs to POST 127.0.0.1:9789/v1/tools/preload-tag-builder/run and inject the returned HTML into your head template. Includes a manifest-walking Node script, a GitHub Actions step, and the drift failure modes.
Read guideStop hand-tuning font-display per @font-face. Encode the swap/optional decision as a reusable rule — a design token, a PostCSS pass, or a generated stylesheet — so the right value is emitted automatically and never drifts. Includes the exact value mapping the strategy picker uses and copy-paste pipeline snippets.
Read guideTurn this generator's clamp() output into per-role design tokens (display, heading, body) for Style Dictionary or plain CSS variables. The tool emits one --font-size-fluid variable per run; this guide shows how to fan that into a token set in a build step.
Read guideThe adjuster emits a body{} block plus a prefers-color-scheme override — not Style Dictionary JSON. This guide shows how to take its three values per mode and wire them into per-mode token sets that emit the same media query, with CI-friendly, deterministic output.
Read guideWOFF2 cuts font payload 30–65% versus TTF, which shortens the font's place on the LCP path, and — paired with font-display and preload — reduces layout shift. A practical guide for performance engineers: what WOFF2 fixes, what it doesn't, and the exact @font-face/preload pairing.
Read guideWhen you must support IE11, locked-down enterprise machines, or embedded WebKit without Brotli, WOFF is the right format. Compatibility matrix, the deployment pattern, and the cost-benefit case — with real generation steps.
Read guideInherited a font folder nobody documented? Run a magic-byte audit across every asset to catch extension/format mismatches, mystery TTCs, and truncated downloads, and produce a clean baseline.
Read guideCompliance and procurement teams need an inspectable TTF/OTF for every web font in production to read the embedded EULA. The canonical workflow: decompress each production WOFF2 to sfnt in the browser, then read name IDs 0/8/13/14 with the metadata extractor — no asset ever leaves the auditor's machine.
Read guideHTML email clients strip external @font-face but most accept base64-inlined fonts. Practical guide to embedding brand fonts in transactional and marketing email — client support, the Outlook desktop reality, and aggressive subsetting.
Read guideWire SVG Fonts into headless PDF generation with PrinceXML, WeasyPrint, or wkhtmltopdf. When SVG Font is preferred over PDF's native font embedding, and when it isn't.
Read guideA framework for standardising on variable, static, or both — covering browser floor, bandwidth, designer tooling, and migration. Includes where freezing fits (default-master fallbacks) and where it doesn't (per-weight statics need fonttools).
Read guideZero-downtime migration from Google Fonts CDN to self-hosted: audit every fonts.googleapis.com reference, generate the rewritten CSS + curl script, visual-regression test, roll out behind a flag, then tighten CSP. With rollback safety nets for SEO-critical traffic.
Read guideServe the right glyphs to the right audience. Per-language subsets via unicode-range, fallback chains, cache strategy, and the CJK and layout-feature gotchas to plan around when one brand font ships 5–20 languages.
Read guideUse a Latin-filtered base font as the default in multilingual deployments, with extended charsets loaded on demand via unicode-range. Serve 191 Latin glyphs to the 80–95% of traffic that's Western-language, and layer Cyrillic/Greek/CJK behind the browser's own range matching.
Read guideBrand-consistent emoji across platforms is expensive. A decision framework — OS-native (smallest), branded chromatic (largest, pixel-perfect), or hybrid — with the real font-payload numbers, the tools that enforce each path, and the silent regressions a mixed strategy causes.
Read guideA defensible policy for standardising on unhinted web fonts: the bandwidth case, the audience analysis that justifies it, the migration path, and the exception that keeps your legacy-Windows cohort crisp. Grounded in what the Hinting Stripper actually does.
Read guideChromatic brand fonts render beautifully where COLR/sbix is supported and as tofu where it isn't. Derive a single monochrome variant from the same source with the Colour Table Remover and serve it as a graceful fallback — with the honest caveats about how browser font selection actually works.
Read guidePremium brand sites ship bespoke display type for headlines but need it under a few KB. Whitelist subsetting keeps only the glyphs in your hero wordmark and tagline. Built in-browser (opentype.js), output is TTF — convert to WOFF2 to hit ~1.5–3 KB. Note: kerning is dropped, which fine display typography often relies on.
Read guideMake OpenType name-table cleanup a written rule in your design system's font pipeline. Covers the real, accurate policy (keep Windows-English nameIDs 1, 2, 4, 5, 6, 13, 14; drop the rest), the licence-compliance caveat that copyright (nameID 0) is removed, and how to enforce it in CI alongside subsetting and WOFF2.
Read guideA documented, per-component ligature convention — body text on, code blocks off, headlines with discretionary ligatures — plus the exact font-feature-settings CSS and how to verify each rule against your real font with the in-browser Ligature Toggler before you ship it as a token.
Read guideUsers report a missing character or a tofu box. The Glyph Inspector's JSON tells you whether that glyph exists in the font, at what index, and whether a codepoint actually reaches it — so you fix the right layer.
Read guideTurn a custom icon font into a JSON catalogue: per-icon name, Private-Use codepoint, advance, bbox, and a render-ready SVG path. Feed it into design-system docs without cataloguing icons by hand.
Read guidePull the embedded licence records (nameID 13 License, nameID 14 License URL) plus copyright, manufacturer, and version from production TTF/OTF/WOFF/WOFF2 fonts — in the browser, without uploading confidential binaries. Cross-reference against your EULA pool and flag the gaps the binary can't answer.
Read guideEvery font carries a version string (nameID 5). Extracting it — alongside a SHA-256 fingerprint — on every build pins your design system to specific font versions and catches the silent foundry updates that quietly change kerning, glyph shapes, and metrics.
Read guideThird-party fonts (Google Fonts, Fontshare, Adobe Fonts CDN) can change without notice. Pin known-good SHA-256 fingerprints, verify on every build, and block deploys on any drift — catching malicious or accidental font swaps before users see them. Build-time pinning plus browser-side SRI.
Read guideBrand fonts live or die at headline size, where missing kerning on pairs like Wa, To, and AV looks visibly amateur. This is a typography QA workflow for auditing a font's kern table before commit — including the crucial caveat that GPOS-only fonts audit empty even when their kerning is excellent.
Read guideConfirm a brand font covers every locale in your i18n matrix before procurement. The Coverage Map scores against all 346 Unicode blocks — Latin, Cyrillic, Greek, Arabic, Devanagari, CJK, Vietnamese and more — turning a guessing game into a 30-second, browser-only block scan with per-block percentages.
Read guideStop guessing line-height. Read each font's real UPM, ascender, descender, line-gap, x-height, and cap-height, then set per-font leading and align baselines across mixed body, heading, and code fonts. JSON output, browser-side, nothing uploaded.
Read guideKill layout shift during font swap by matching the system fallback to the web font's metrics. Read both fonts' UPM, ascender, descender, and x-height with the analyser, then hand-compute the ascent-override, descent-override, line-gap-override, and size-adjust descriptors.
Read guideMature design systems pin which OpenType features each typography role uses — tnum for tables, smcp for legends, liga + calt for body, no swsh anywhere — and document them as tokens. Audit every brand font with the Features Inspector, then bake the decisions into font-feature-settings tokens so typography stops drifting.
Read guidePerformance budgets cap font weight per page. The glyph count analyser projects each subset's WOFF2 size so you can see which fits your LCP/page-weight budget — what the projections mean, where they're conservative, and how to hold the budget once it's set.
Read guideWhat changed: WOFF2-only is fine for ~99% of traffic, font-display: swap is the default (optional for body), and size-adjust + ascent-override kill the layout shift fonts used to cause. This is the 2026 checklist, mapped to exactly what the @font-face Generator produces — and to the descriptors you still add by hand.
Read guideGenerate a base :root scale of CSS custom properties, then layer your own semantic role tokens (display, heading, body, code) on top. This tool emits the raw scale plus fixed weight/line-height/letter-spacing tokens; you alias the semantic layer by hand. No upload, free.
Read guideThe ratio you pick is a brand-tone decision. Gentle ratios (1.067–1.2) read as calm and reading-first; aggressive ratios (1.5–1.618) read as dramatic and editorial. Map your brand to one of the builder's eight presets, with the exact sizes each produces.
Read guideMake a zero-byte system font stack the body-text default in your design system and reserve custom web fonts for branded display surfaces. Policy framework, the exact token to pin, governance rules, and the migration path from a cargo-culted stack.
Read guidePreloading the LCP-element's font starts the fetch alongside the HTML parse and cuts LCP by 100–500 ms on slow connections — but only if you preload the right one font, not all of them. This strategy guide shows how to find the LCP font, how many to preload, why crossorigin and font-display matter, and how to verify, using the JAD preload builder for the tags.
Read guideDifferent sites weigh brand identity and load performance differently, and that weighting decides your font-display value. Brand-first surfaces pick swap (the font appears even if late); performance-first surfaces pick optional (no late surprises). This guide maps common site types to the right default and explains the trade with the strategy picker's real mapping.
Read guideHow modern marketing sites use fluid clamp() typography — hero, heading and body patterns, the min/max ranges they favour, and the exact clamp() this generator produces to recreate each one. Grounded in what the tool really computes.
Read guideThe spectrum of how shipping sites handle dark-mode type: colour-only flip, single weight reduction, or the full weight + letter-spacing + line-height treatment. Which level fits your audience, with the exact CSS the adjuster generates for each.
Read guideReference for unusual TTF/OTF→WOFF2 conversions: TrueType Collections (.ttc) that get rejected, oversized CJK output, colour tables (COLR/sbix/CBDT), variable fonts, corrupt SFNTs, and tier size limits. Grounded in what JAD's wawoff2-based converter actually does.
Read guideField reference for every way WOFF2 decompression goes sideways: the wOF2 magic-byte gate, mislabelled WOFF/TTF/TTC files, the two distinct error strings (wrong format vs Brotli failure), CFF-vs-TrueType flavour detection, and the metadata that always survives. Maps each symptom to the exact behaviour of the wawoff2-based decompressor.
Read guideA reference for font magic bytes: hex, ASCII, what follows the magic in each format, and which values the JAD identifier recognises. For tooling authors, font librarians, and anyone debugging file headers.
Read guideReal measured numbers for base64-inlining web fonts: 1.333× raw inflation, gzip recovers within 1% for WOFF2 but inflates TTF by 17%, lightningcss silently drops @font-face rules with whitespace in base64, and atob rejects URL-safe alphabets. Includes a paste-in @font-face validator.
Read guideReference for the deprecated SVG Font spec: glyph element layout, coordinate system, font-face attributes, and the gotchas that made consistent rendering impossible.
Read guideThe real failure modes of freezing a variable font in JAD: non-default axis values that don't bake, OTF flavor mislabeling, un-recomputed head checksum, MVAR metric reversion, CJK fonts that barely shrink, and the fvar-required rejection. Grounded in the actual implementation.
Read guideExactly what survives and what breaks when the JAD Subsetter rebuilds a font: outlines and cmap are kept; kerning, GSUB/GPOS, variable axes and colour tables are dropped. The honest reference, grounded in the opentype.js writer.
Read guideReference for the unusual Latin Filter cases: empty subsets, CFF writer failures, dropped kerning, WOFF2-in-TTF-out, flattened variable fonts, and the silent box-glyphs when a font lacks coverage in U+0020–U+00FF.
Read guideReference for the non-obvious cases: ZWJ sequences, skin-tone modifiers, regional-indicator flag pairs, the Private-Use-Area icon-font trap, text-mode symbol variants, CFF writer failures, and the kerning loss the rebuild always causes.
Read guideWhat each of the seven hinting-related OpenType tables holds (fpgm, prep, cvt, gasp, hdmx, VDMX, LTSH), who still reads them, and exactly what happens when the Hinting Stripper deletes all seven and rebuilds the sfnt directory.
Read guideField-level reference for the OpenType colour tables — COLR (v0/v1), CPAL, sbix, SVG, CBDT/CBLC, and legacy EBDT/EBLC — with renderer priority, browser support, and exactly which tags the Colour Table Remover drops.
Read guideReference for the real behaviour of JAD's in-browser Character Whitelist Builder: it outputs uncompressed TTF, always keeps .notdef, drops kerning and OpenType features, splits multi-codepoint clusters, and errors only when zero glyphs match. The exact failure modes, grounded in the implementation.
Read guideReference for every standard OpenType name record ID: what each means, which consumers read it, and — specifically — which the JAD name-table cleaner keeps (1, 2, 4, 5, 6, 13, 14) versus removes (0, 3, 7, 8-12, 16, 17, 19, 256+). Corrects the common myth that copyright and variable-font axis names are preserved.
Read guideEvery ligature-class OpenType feature tag — liga, calt, dlig, hlig, rlig — with default state, the exact font-feature-settings and font-variant-ligatures CSS, browser support, and which of them the in-browser Ligature Toggler can preview directly.
Read guideReference for the OpenType glyph metadata the inspector surfaces: glyph index, post/CFF names, the primary cmap codepoint, hmtx advance, outline bbox, and the em-scaled SVG path. What each field means and how it's produced.
Read guideA field-by-field reference for the standard OpenType name-table record IDs (0–25) plus axis names (256+): what each ID means, whether browsers and tooling read it, which the Metadata Extractor surfaces, and which are safe to strip. Grounded in what the extractor actually labels.
Read guideThe surprising cases when a font's SHA-256 changes (or doesn't): editor re-saves that bump the head timestamp, identical-rendering files with different bytes, WOFF2 determinism, OS installer round-trips, and why the hash is byte-exact and format-agnostic. Reference for anyone debugging unexpected fingerprint drift.
Read guideA reference of the Latin letter pairs that always need kerning (AV, To, Wa) with typical font-unit values, plus how to check them against your font's audit — and why a GPOS-kerned font shows none of them in the legacy-table auditor.
Read guideA practical reference to the font-relevant Unicode blocks: codepoint ranges, block sizes, and the languages each covers. The Coverage Map scores fonts against all 346 standard blocks (Unicode 17.0.0) — this guide explains what those block names and ranges actually mean for choosing and subsetting a font.
Read guideReference for OpenType vertical metrics — head UPM, hhea, OS/2 typo, OS/2 win, post — what each field holds, which renderers prefer which, and exactly which of them this analyser reads (head, OS/2, hhea) and which it doesn't (post).
Read guideA reference for the OpenType feature tags you'll actually meet — what each does, its default state, the CSS to enable it, and the font-variant-* alias where one exists. Covers spacing, ligatures, figures, caps, stylistic features, fractions, and complex-script tags, mapped to what the Features Inspector reports.
Read guideCJK fonts ship thousands of glyphs and routinely exceed the analyser's free-tier limits. Here's what the glyph count analyser does and doesn't tell you about CJK, why none of its six subsets cover Han/Kana/Hangul, and how to size CJK subsets the right way.
Read guideA reference for all the @font-face descriptors: src, font-family, font-weight, font-style, font-display, unicode-range, plus the metric overrides size-adjust, ascent-override, descent-override, line-gap-override, and font-stretch/font-feature-settings/font-variation-settings. Example values, browser support, and a clear line between what the @font-face Generator emits and what you add by hand.
Read guideReference for typography token naming across design systems: Tailwind size names, Material Design roles, IBM Carbon's hybrid, Atlassian. This generator emits Tailwind-style names (xs…8xl); here's how to map its output to any convention.
Read guideReference for the eight named modular ratios the JAD scale builder offers — numeric value, musical origin, design tone, and the exact sizes each produces from a 16px base. Plus how to use a non-preset ratio via the runner API.
Read guideReference for the default UI font on each major OS and the exact CSS names you need to reach them — San Francisco via -apple-system, Segoe UI, Roboto, Oxygen/Ubuntu/Cantarell on Linux. Maps each platform to the font-family chain the generator emits for that OS scope.
Read guideEvery attribute on a font <link rel=preload> — as, href, type, crossorigin, media, fetchpriority, integrity — what each does, whether it's required, and browser support. Notes precisely which ones the JAD preload builder emits (rel, as, type, href, crossorigin) and which you add by hand (media, fetchpriority, integrity).
Read guideA precise reference for the CSS font-display descriptor: the three timeline phases (block, swap, failure), exactly what all five values (auto, block, swap, fallback, optional) do in each phase, where the descriptor is valid, and the gotchas the spec implies. Paired with a one-control picker that emits an annotated skeleton.
Read guideReference for CSS clamp() as used for fluid typography: the three-argument signature, the linear-interpolation math (slope and intercept), browser support, related math functions, and exactly how this generator computes its output.
Read guideA reviewable checklist for shipping dark-mode typography correctly: drop weight 50–100 (floored at 100), add 0.01em tracking and 0.05 line-height, use off-white text on off-black, and verify on OLED. Marks which items the adjuster automates and which you add by hand.
Read guideUpload a variable font and get a per-axis range report plus a ready-to-run `fonttools varLib.instancer` command that pins each axis to the span its named instances actually use. The optimiser reads the fvar table in your browser — it never writes the trimmed font itself, because no JavaScript library has a complete VarLib equivalent. Use the emitted command on the desktop to do the real subsetting.
Read guideRoboto Flex declares thirteen axes — most sites use one or two. Upload the font and the optimiser reports every axis with its declared range, the range its named instances actually span, and a per-axis savings percentage, then hands you a `fonttools varLib.instancer` command pinning the rest. It reads the fvar table in your browser and never rewrites the font; the trimming runs on the desktop.
Read guideMost design systems use four or five weights, not the full 100–900 a variable font declares. Upload your font and the optimiser reports the wght axis's declared range versus the span your named instances cover, with a savings percentage, then emits a `fonttools varLib.instancer` command to pin the edges. It reads fvar in your browser and never rewrites the font — the trim happens on the desktop.
Read guideBefore you write font-weight or font-stretch rules, find out the variable font's actual axis ranges. Drop the file and read the true min/default/max for wght, wdth, slnt, ital, opsz, and any custom axis — decoded from the fvar table, in your browser, no upload.
Read guideGenerate the nine @font-face weight presets (Thin–Black) that back a design system's font-weight tokens, all from one cached variable WOFF2. Then map them to --font-weight-* custom properties so components reference tokens, not raw font-variation-settings.
Read guideDrop a variable TTF, OTF, WOFF, or WOFF2 and read its fvar table in your browser: every axis tag (wght, wdth, slnt, ital, opsz, and custom 4-letter tags) with its min, default, and max, plus every named instance and a ready-to-paste font-variation-settings block. Nothing uploads — the parser runs client-side.
Read guideTurn one variable WOFF2 into nine @font-face blocks (Thin 100 through Black 900) that all point at the same file and bind each font-weight number to a font-variation-settings "wght" value. No upload — type a family name and a font URL and copy the CSS.
Read guideInter ships a wght axis from 100 to 900 — exactly the ladder this builder emits. Get nine self-hosted @font-face blocks for Inter.var.woff2, each mapping a font-weight number to font-variation-settings "wght", from one cached file. Two fields, no upload.
Read guideUse the variable-vs-static projection to put a real byte budget on your web fonts. Read variable_file_bytes, the per-weight static estimate, and the 1-9 weight totals to keep font payload off your LCP critical path.
Read guideShould you ship one variable WOFF2 with nine @font-face weight presets, or several static weight files? The break-even, the caching trade-offs, and how to generate the preset CSS in the browser when the variable path wins.
Read guide