Font Engineering Guides &amp; Tutorials

Convert TTF to WOFF2 Online for Free

Compress any TTF or OTF font to WOFF2 in your browser using Google's WASM Brotli encoder. Typically 30–50% smaller than WOFF. Zero upload, zero cost.

Convert TTF or OTF to WOFF Online for Free

Wrap any TTF or OTF font in the WOFF 1.0 container with zlib compression. Wider browser support than WOFF2 for legacy environments. Browser-only, zero upload.

Decompress WOFF2 to TTF Online

Extract the underlying TrueType font from any WOFF2 file. Useful for desktop installation, font-editor inspection, and licensing audits. Browser-only.

Encode Any Font File as a Base64 Data URI

Convert TTF, OTF, WOFF, or WOFF2 fonts to base64 data URIs for direct embedding in CSS, HTML email templates, and offline kiosk apps. Browser-based.

Detect Font Format from File Magic Bytes

Drop any font file and reveal its true format from the first 4 bytes. Detects TTF, OTF (CFF), WOFF, WOFF2, and TrueType collections. Browser-only.

Convert TrueType or OpenType to a Legacy SVG Font

Convert 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.

Convert a Variable Font to a Static TTF

Strip the variable axis tables from any variable font to produce a static TTF. Useful for legacy browsers, smaller bundles, and pipelines that don't accept fvar.

Self-Host Google Fonts: GDPR-Compliant CSS Generator

Convert any fonts.googleapis.com URL into self-hostable @font-face CSS. Eliminates IP-leak to Google, satisfies GDPR, and improves TTFB. Includes a curl script to download every WOFF2.

Subset a Font Online to Shrink WOFF2 by 60–90%

Drop unused glyphs from any font to slash WOFF2 file size. Choose a named charset (latin, latin-ext, cyrillic, greek) or define a custom set. Browser-based.

Filter Any Font to Basic Latin + Latin-1 Online

One-click subset to U+0020–U+00FF (Basic Latin + Latin-1 Supplement). Covers English, French, German, Spanish, Italian, and most Western European content.

Strip Emoji and Pictograph Glyphs from Any Font

Drop emoji and pictograph glyphs (U+1F300–U+1FAFF, U+2600–U+27BF, U+E000–U+F8FF) from a font. Useful when system fonts already provide colour emoji at the OS level.

Remove TrueType Hinting from Any Font

Drop the fpgm, prep, cvt, gasp, hdmx, VDMX, and LTSH tables. Reduces font size by 5–20%. Modern OSes ignore hints anyway — pure waste on macOS and iOS.

Strip Colour and Chromatic Glyph Tables from a Font

Drop COLR, CPAL, sbix, SVG, CBDT, and CBLC tables from chromatic fonts. Result is a regular monochrome outline font — typically 70–95% smaller.

Build a Hyper-Minimal Font with a Character Whitelist

Paste an exact character set and get a custom subset of any font. Perfect for logos, headlines, and branded marks where you need 5–30 specific glyphs.

Clean Bloated Name Table Records from a Font

Strip duplicate Mac platform records and unused localised strings from the OpenType name table. Saves 1–10 KB per font with no functional impact on browsers.

Toggle OpenType Ligatures and Preview the Result

Preview ligature on/off rendering for any font, then export the CSS to control liga/calt/dlig via font-feature-settings without modifying the binary.

Inspect Every Glyph in Any Font Online

Drop a font and browse every glyph with name, Unicode codepoint, advance width, and live thumbnail preview. Search by character, codepoint, or glyph name.

Extract Every Metadata Record from a Font

Dump the full name, OS/2, head, post, and hhea tables from any font. See family, designer, manufacturer, version, licence, vendor ID, and more.

Generate a SHA-256 Fingerprint for Any Font

Hash any font file with SHA-256 to create a stable identifier for cache-busting, integrity verification, and version tracking. Browser-native Web Crypto API.

Audit the Kerning Pair Table of Any Font

Inspect every kerning pair in the kern and GPOS tables. See which letter pairs adjust and by how many font units. Catch missing pairs and unintended kerning.

Visualise a Font's Unicode Coverage as a Block Map

See which Unicode blocks a font supports. Visual matrix of every Unicode block with covered-glyph counts and percentage coverage. Browser-only.

Analyse Font Metrics: UPM, Ascender, x-Height, Cap-Height

Extract every vertical metric from a font's OS/2, hhea, and head tables. Get a recommended line-height plus copy-paste CSS for perfectly aligned typography.

Inspect Every OpenType Feature in a Font

List every GSUB/GPOS feature tag (liga, calt, smcp, ss01, swsh, kern) with human-readable labels and the font-feature-settings CSS to enable each one.

Estimate Subsetting Savings Before You Commit

Count total glyphs and project the file size after subsetting to common charsets (Latin, Latin Extended, Cyrillic, Greek, custom). Pick the right subset before you commit.

Generate Production-Ready @font-face CSS

Build a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.

Generate CSS Custom Properties for Typography

Build a typography token system: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.

Build a Modular Typography Scale with Fluid clamp()

Generate a full type scale (xs–4xl) using a chosen modular ratio. Output is fluid clamp() CSS that scales smoothly between two viewport widths.

Generate Native System Font Stacks for Sans, Serif, Mono

Build a font-family declaration that uses the best native font on each OS — San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Zero web fonts, instant rendering.

Build <link rel=preload> Tags for Your Web Fonts

Generate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.

font-display: swap vs fallback vs optional Decision Guide

Five font-display values, three real choices: swap, fallback, optional. Which to use per surface, with rationale and CSS snippets.

Generate Fluid Font Sizes with CSS clamp()

Pick a min and max font size plus a viewport range and get a clamp() expression that interpolates smoothly between them. Single field — copy-paste ready.

Adjust Font Weight, Spacing, Line-Height for Dark Mode

Reduce font weight by 50–100, increase letter-spacing by 0.01em, and bump line-height by 0.05 in dark mode. Auto-generates a prefers-color-scheme media query.

Comparison & Education

29 guides

TTF vs WOFF vs WOFF2: Web Font Format Comparison

Side-by-side comparison of TTF, WOFF, and WOFF2 web font formats. Compression ratio, browser support, file size, and the recommended @font-face src ordering.

WOFF vs WOFF2: When to Ship Both, When to Pick One

Decision guide for shipping WOFF, WOFF2, or both. Browser support reality, file size deltas, and the @font-face src ordering that gracefully falls back across every browser.

Base64 Fonts vs External Font Files: Performance Tradeoffs

When base64 fonts help and when they hurt. Comparison of base64-inlined fonts vs external woff2 files: HTTP overhead, parallel loading, caching, and CSS parse time.

TTF vs OTF: What the Magic Bytes Tell You

TTF and OTF look identical in file managers but differ at byte zero. Learn which outline format each magic value indicates, and what that means for hinting, file size, and renderer support.

WOFF2 vs TTF: Which Format to Use When

TTF and WOFF2 wrap the same OpenType data. The difference is wire format. Comparison of file size, browser support, desktop installability, and the workflows where each format wins.

SVG Fonts vs Modern Formats: How We Got Here

Why 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.

Variable Fonts vs Static Fonts: When Each Wins

Variable fonts are smaller when you ship 3+ weights from one family. Static fonts are smaller when you ship 1–2. Decision guide with real-world file size deltas.

Google Fonts CDN vs Self-Hosted Performance Comparison

Real-world performance comparison of Google Fonts CDN vs self-hosting. DNS, TLS, TTFB, LCP impact, and the cases where the CDN actually wins.

Font Subsetting vs CSS unicode-range Strategies

Two ways to ship lighter fonts: bake the subset into the file, or split the file by unicode-range. Comparison of the two strategies and when each wins.

Latin-1 vs Latin Extended: Which Charset Do You Need?

Decide between Latin Basic, Latin-1 Supplement, Latin Extended-A, and Latin Extended-B for your target audience. Coverage map by language with file size implications.

How Emoji Render: OS Fonts vs Web Fonts

Why your web font's emoji glyphs almost never render. Browser font fallback chain, OS emoji fonts, and the strategy for shipping the smallest emoji-aware payload.

TrueType Hinting vs Modern Subpixel Rendering

Why TrueType hinting was essential in 1995 and why it's mostly obsolete in 2026. Comparison of GDI/ClearType vs DirectWrite vs CoreText rendering pipelines.

Colour Font Formats: COLR, sbix, SVG-in-OT Compared

Four ways colour fonts encode chromatic glyphs: COLRv0/v1 (Microsoft), sbix (Apple), CBDT/CBLC (Google), and OpenType-SVG. Browser support and file-size implications.

Whitelist vs Charset: Which Subset Strategy Wins?

Two ways to subset a font: keep an exact character list (whitelist) or keep a Unicode range (charset). Comparison of when each strategy wins for specific use cases.

OpenType Name Table: Platforms, Encodings, Languages

Reference for the OpenType name table's platform/encoding/language structure. Why fonts ship 50+ records for one piece of data and which records browsers actually read.

Ligatures: From Hot Metal to Variable Fonts

How ligatures evolved from typographic necessity to OpenType feature flag. Standard, discretionary, contextual ligatures — what each means and when to use them.

Use Font Fingerprints for Cache-Busting and SRI

Three patterns for cache-busting fonts using SHA-256 fingerprints: filename hashing, query-string hashing, and Subresource Integrity. Pros and cons of each.

Kerning Storage Formats: kern vs GPOS vs Class-Based

Three ways fonts store kerning: legacy kern table (simple pairs), GPOS pair-pos lookups, and GPOS class-based lookups. What each is, when each wins, and how browsers read them.

Coverage Map vs Glyph Count: Different Questions, Different Answers

Glyph Count tells you how many glyphs a font has. Coverage Map tells you which languages they cover. Use both for complete font selection decisions.

OpenType Stylistic Sets, Alternates, and Swashes

Stylistic sets (ss01–ss20), stylistic alternates (salt), and swashes (swsh) — three feature categories that change letter shapes. When and how to use each.

Glyph Count vs Coverage Map for Font Selection

Glyph Count tells you size; Coverage Map tells you language fitness. Used together they answer 'will this font work and at what cost?' in one minute.

Why @font-face format() Hints Matter

format() hints tell browsers which src files to attempt. Wrong hints waste bandwidth; missing hints break legacy browsers. Reference for every supported format hint.

CSS Variables vs Sass vs Less for Typography Tokens

Three preprocessor approaches to typography tokens: native CSS variables, Sass, Less. Tradeoffs in build complexity, runtime mutation, and theming.

Modular Scale vs Arbitrary Sizes: Which Works Better

Modular scales produce harmonious typography; arbitrary sizes give finer control. When each wins for design system maturity and brand expression.

System Font Stack vs Custom Web Font: When to Pick Which

Performance-first sites use system stacks; brand-first sites use custom web fonts. Decision framework with real-world examples and the hybrid approach most sites land on.

preload vs prefetch vs preconnect: Which for Fonts

Three resource-hint directives — preload, prefetch, preconnect. Each has a different role in font loading. Reference for picking the right hint per scenario.

FOUT vs FOIT: Understanding Font Loading Behaviour

Flash of Unstyled Text (FOUT) vs Flash of Invisible Text (FOIT). Which font-display values produce which behaviour, and which is the lesser evil.

Fluid Typography vs Media Query Steps

Two approaches to responsive typography: clamp() fluid scaling vs media-query stepped sizes. Comparison of design quality, complexity, and browser support.

Halation: Why Dark Mode Text Needs Adjustments

Halation is the visual blooming of light pixels on dark backgrounds. Why it makes text look bolder, how to compensate, and what Apple HIG and Material Design recommend.

Developer & Automation

32 guides

Automate TTF-to-WOFF2 Conversion in Your Build Pipeline

Wire WOFF2 conversion into your Webpack, Vite, Next.js, or GitHub Actions pipeline. Convert font assets at build time so every deploy ships the smallest possible bytes.

Batch Convert TTF to WOFF in a Build Script

Convert every TTF in your design system to WOFF in one command. Node script using the JAD WOFF logic — pako compression, spec-compliant output, idempotent reruns.

Validate Font Format in CI/CD Pipelines

Add a format-check step to your CI pipeline. Catch corrupt downloads, mislabeled files, and accidental TTC commits before they reach production. Pure JS, zero dependencies.

Batch-Decompress WOFF2 to TTF in CI

Run WOFF2 → TTF extraction across hundreds of files in a single CI step. Useful for design system migrations, licensing audits, and PDF pipeline preparation.

Automate Font Base64 Encoding in Your Build Pipeline

Inline fonts as base64 only at build time, never at runtime. Node script for converting WOFF2 fonts to data URIs and injecting them into CSS or HTML email templates.

Build a Static Fallback Pipeline for Variable Fonts

Wire variable-to-static freezing into your build pipeline. Modern browsers get the variable font; legacy browsers fall back to static via @font-face src lists.

Automate Google Fonts Self-Hosting in Your Build Pipeline

Script the Google Fonts → self-host conversion in your CI pipeline. Re-fetch on demand, pin to specific versions, and ensure GDPR compliance ships on every deploy.

Automate SVG Font Generation for PDF Build Pipelines

Generate 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.

Automate Font Subsetting in Your Build Pipeline

Wire font subsetting into your build script so every deploy ships the smallest possible WOFF2. Node script using opentype.js for browser-parity output.

Batch Apply Latin Filter Across Multi-Weight Font Families

Run Latin Filter across every weight of your font family in one CI command. Pure JS Node script using opentype.js for browser-parity output.

Automate Emoji Removal in Your Font Build Pipeline

Wire emoji-glyph removal into CI. Every deploy ships emoji-free brand fonts that delegate to the OS emoji renderer. Pure-JS Node script.

Strip Font Hinting Automatically in CI/CD

Wire hinting removal into your build pipeline. Every deploy ships hint-free fonts that save 5–20% file size with no rendering loss on modern devices.

Strip Colour Tables in Your Build Pipeline

Wire colour-table removal into CI for cases where you need monochrome outputs. Pure-JS Node script using binary table-directory surgery.

Whitelist-Subset Hero Fonts in Your Build Pipeline

Wire whitelist subsetting into your marketing site build. Hero text changes weekly? Re-derive the whitelist from the page and regenerate the font automatically.

Automate Name Table Cleanup in Your CI Pipeline

Wire name table cleanup into your build script for compounding savings. Pure-JS Node port of the JAD logic — handles the binary table rewrite without external tools.

Generate Ligature Toggle CSS at Build Time

Wire the JAD Ligature Toggler logic into your build script to auto-generate per-component ligature CSS based on font features detected.

Generate Design Tokens from Glyph Inspector Output

Wire the JAD Glyph Inspector logic into a Node script. Auto-generate icon design tokens from custom icon fonts on every CI run.

Automate Font Metadata Extraction in CI

Wire metadata extraction into CI to capture font version, licence, and vendor info on every build. Pure-JS script using opentype.js.

Generate Font Fingerprints in Your Build Pipeline

Wire SHA-256 fingerprinting into CI. Auto-rename fonts with content hashes, generate SRI attributes, and detect silent third-party font updates.

Wire Kerning Audits into Your Design System CI

Catch kerning regressions automatically. Node script reads kern + GPOS tables and warns when kerning pair counts drop unexpectedly.

Generate Coverage Reports for Every Font in Your Design System

Wire the Coverage Map into CI for automated multi-font audits. Catch foundry updates that drop language support before they ship.

Generate Typography Design Tokens from Font Metrics

Wire the Metrics Analyser into a CI script that emits design tokens — line-height, x-height ratio, cap-height ratio — per font in your system.

Inspect OpenType Features Programmatically in CI

Wire the Features Inspector into a CI script. Catch feature regressions when foundries update fonts and verify your design system's feature requirements.

Enforce Font Glyph Budgets via CI Script

Wire Glyph Count Analyser into CI to fail builds when fonts exceed budget. Catches regressions when foundry updates inadvertently grow the glyph set.

Generate @font-face CSS at Build Time

Wire the @font-face Generator into CI. Auto-emit @font-face blocks based on your fonts directory, with content-hashed URLs and matching format() hints.

Pipe Typography Tokens through Style Dictionary

Wire the JAD Typography CSS Variables output into Style Dictionary for cross-platform tokens. Same tokens emit CSS for web + Swift for iOS + XML for Android.

Generate Type Scales in CI Pipelines

Wire the Type Scale Builder into CI for cross-platform token generation. Same scale emits CSS for web, Swift type sizes for iOS, dimens.xml for Android.

Generate System Font Stacks Programmatically

Wire system stack generation into design tokens. Sans, serif, monospace stacks emitted per OS scope from a single source — drop into Style Dictionary or component libraries.

Auto-Generate Font Preload Tags in CI

Wire preload tag generation into CI. Auto-emit <link rel=preload> for content-hashed font URLs. Drops directly into your HTML head template.

Apply font-display Strategies in Build Pipelines

Wire font-display strategy decisions into your build script. Per-surface strategies (swap for hero, optional for body) emitted automatically.

Encode Fluid Typography as Design Tokens

Wire clamp() expressions into design tokens. Per-role tokens (display, heading, body) emit fluid scaling automatically — drop into Style Dictionary or CSS variables.

Encode Dark Mode Typography Adjustments as Design Tokens

Wire dark-mode font adjustments into design tokens. Per-mode token sets (light, dark) emit prefers-color-scheme media queries automatically.

Industry Use Case

35 guides

How WOFF2 Improves Core Web Vitals and Page Speed

WOFF2 cuts font payload by 30–50%, which directly improves Largest Contentful Paint (LCP), reduces Cumulative Layout Shift (CLS), and lowers Total Blocking Time. Real-world impact, measured.

Using WOFF for Legacy Browser and Enterprise Compatibility

When supporting IE11, locked-down enterprise browsers, or embedded WebKit views, WOFF is the right format. Compatibility matrix, deployment patterns, and the cost-benefit case.

Audit a Font Library for Extension/Format Mismatches

Run an audit across every font in your design system to catch extension/format mismatches, mystery TTCs, and corrupt files. Real-world workflow for inheriting a 5-year-old codebase.

Extract Web Fonts to TTF for Licensing Audits

Compliance teams need TTF copies of every web font in production to verify EULA terms. Decompress WOFF2 → TTF in your browser, then run the Metadata Extractor for the licence string.

Embed Custom Fonts in HTML Email Templates

HTML email clients strip external resources but most accept base64-inlined @font-face. Practical guide to embedding brand fonts in transactional and marketing emails.

Use SVG Fonts in PDF Generation Pipelines

Wire 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.

Set a Variable Font Policy for Your Design System

Should your design system standardise on variable, static, or both? Policy framework covering bandwidth, browser support, designer tooling, and migration paths.

Migrating a Marketing Site Off Google Fonts CDN

Step-by-step migration from Google Fonts CDN to self-hosted: audit, rewrite, validate, deploy. Real-world workflow with rollback safety nets.

Subset Fonts for a Multilingual Design System

Strategy for serving the right glyphs to the right audience. Per-language subsets via unicode-range, fallback chains, and the patterns top SaaS uses for global sites.

Deploy Latin Filter as a Default for i18n Sites

Use Latin Filter as the default base font in multilingual deployments, with extended charsets loaded on demand via unicode-range. Reduces 95% of traffic's bandwidth.

Set an Emoji Strategy for Your Design System

Brand-consistent emoji across platforms is hard. Strategy framework: OS-native (smallest), branded chromatic (largest, prettiest), or a hybrid for marketing surfaces.

Adopting Hinting Strip as a Design System Policy

When and why to standardise on unhinted fonts across your design system. Performance gains, audience considerations, and the migration path from hinted to unhinted.

Ship a Monochrome Fallback for Chromatic Brand Fonts

Modern browsers render chromatic brand fonts beautifully; older ones render tofu. Ship a monochrome fallback derived from the same source for graceful degradation.

Whitelist Brand Fonts for Luxury Marketing Pages

Premium brand sites ship custom typography for headlines but want it under 3 KB. Whitelist subsetting delivers branded type at near-zero bandwidth cost.

Adopt Name Table Cleanup as a Design System Policy

Why name table cleanup belongs in every design system's font pipeline. Compounding bandwidth savings, deploy hygiene, and the case against keeping unused localised records.

Set Ligature CSS Conventions for Your Design System

Default ligature settings for design systems. Where to enable discretionary ligatures, where to disable standard ones, and how to write the CSS for clean defaults.

Debug Missing Glyphs and Tofu with the Glyph Inspector

When users report missing characters or tofu boxes, the Glyph Inspector confirms whether the glyph exists in the font. Catch coverage gaps before users do.

Build an Icon Font Catalogue with the Glyph Inspector

Document every icon in a custom icon font. Export glyph names, Unicode codepoints, and CSS escape sequences for design system reference docs.

Use Font Metadata for Licensing Compliance Audits

Compliance teams need licence data from production fonts. The Metadata Extractor surfaces nameID 13 (licence) and nameID 14 (licence URL) from any font — TTF, OTF, WOFF, WOFF2.

Use Font Metadata for Design System Version Tracking

Every font has a version string in nameID 5. Extracting it on every build keeps your design system pinned to specific font versions — no silent updates.

Use Font Fingerprints for Supply Chain Security

Third-party fonts (Google Fonts, fontshare, Adobe Fonts CDN) can change without notice. SHA-256 fingerprinting detects supply-chain swaps before they ship to users.

Audit Kerning Quality for Brand Typography

Brand fonts ship with foundry-defined kerning. Auditing the pair table catches gaps before they affect headline legibility. Workflow for typography QA teams.

Audit Multilingual Font Coverage with the Coverage Map

Confirm a font supports every language in your i18n matrix before adopting it. The Coverage Map shows Latin, Cyrillic, Greek, CJK, Arabic, Devanagari, and 300 more blocks.

Use Font Metrics for Perfect Vertical Rhythm

Set line-height that respects every font's metrics. Match cap-height across fonts for perfect baseline alignment. Practical guide using the Metrics Analyser output.

Match Fallback Fonts via Metric Comparison

Reduce CLS during font swap by picking fallback fonts with matching metrics. Practical workflow using ascent-override, descent-override, and size-adjust CSS descriptors.

Standardise OpenType Feature Usage in Your Design System

Pin the features your design system uses (kern, liga, calt, smcp, tnum) and document them. Prevents inconsistent typography across components and teams.

Plan Font Glyph Budgets for Performance Targets

Web Vitals budgets cap font weight at 100 KB. The Glyph Count Analyser tells you which subsets fit. Practical glyph-budget planning workflow.

@font-face Best Practices for 2026

Modern @font-face checklist: WOFF2-only delivery, font-display: swap, preload critical fonts, size-adjust for fallback matching, unicode-range for subsets.

Build a Typography Token System for Your Design System

Standardise typography across product, marketing, and email surfaces. CSS variable system with semantic role tokens (heading-display, body, code) instead of raw size names.

Pick a Type Scale Ratio That Matches Brand Personality

Different ratios convey different brand tones. Soft and reading-focused (Minor Third) vs dramatic and headline-driven (Golden Ratio). Match the ratio to your audience.

Adopt System Stack as Design System Default for Body

Most modern design systems use system stacks for body text and reserve custom web fonts for display surfaces. Policy framework for adoption.

Use Font Preload to Improve Core Web Vitals

Preloading the LCP-element font cuts LCP by 100–500 ms on slow connections. Strategy guide for picking which fonts to preload, how many, and when.

Brand-First vs Performance-First font-display Decisions

Different sites have different priorities. Branding sites pick swap (visible brand identity ASAP). Performance sites pick optional (no late surprises).

Fluid Typography in the Wild: Real Examples

Modern sites that use fluid clamp() typography. Patterns, ratios, and CSS snippets from sites like Stripe, Linear, Vercel, and Apple.

Dark Mode Typography Implementation in Production

How major sites handle dark-mode typography adjustments. GitHub, Linear, Apple — each takes a different approach. Practical patterns and CSS snippets.

FAQ & Reference

31 guides

TTF to WOFF2 Edge Cases and Troubleshooting Reference

Reference guide for unusual TTF-to-WOFF2 conversion cases: huge CJK fonts, embedded bitmaps, sbix Apple colour fonts, COLRv1 chromatic emoji, and TTC font collections.

How WOFF Wraps TTF: A Look Under the Hood

Reference guide to the WOFF 1.0 file format: header bytes, table directory, per-table zlib compression, and the differences from a raw sfnt. Useful for tooling authors.

WOFF2 Decompression Edge Cases and Common Errors

Reference for unusual WOFF2 decompression cases: corrupt files, version mismatches, missing tables, and output format detection (TTF vs OTF/CFF).

Complete Reference: Font Format Magic Bytes

Reference table of every font format's magic bytes, plus the historical context for each. Useful for tooling authors, font librarians, and anyone debugging file-format issues.

Base64 Fonts in 2026: Measured Inflation, the Three Failure Modes, and an Inline Validator

Real 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.

SVG Font Spec Quirks and Implementation Reference

Reference for the deprecated SVG Font spec: glyph element layout, coordinate system, font-face attributes, and the gotchas that made consistent rendering impossible.

Variable Font Freezing Edge Cases and Gotchas

Reference for unusual freezing scenarios: multi-axis fonts, custom axes, MVAR-only metrics, and fonts where freezing alone doesn't fully strip variable behaviour.

Font Subsetting Tradeoffs and Known Limitations

Reference for what survives and what breaks during font subsetting: kerning, ligatures, OpenType features, variable axes, and CFF-specific quirks.

Latin Filter Edge Cases and Quirks Reference

Reference for unusual Latin Filter cases: fonts with locked metrics, missing Latin coverage, hybrid scripts, and the silent failures of misconfigured subsets.

Emoji Removal Edge Cases and Implementation Quirks

Reference for unusual emoji-removal scenarios: ZWJ sequences, skin-tone modifiers, regional indicator pairs, and the Private Use Area trap.

TrueType Hinting Tables: Complete Reference

Reference for every TrueType hinting table: fpgm, prep, cvt, gasp, hdmx, VDMX, LTSH. What each does, when it matters, and what happens after stripping.

Colour Font Tables: Complete Reference

Reference for OpenType colour tables. Field layouts, browser support matrix, and the order of operations renderers use to pick which colour format to render.

Whitelist Builder Edge Cases and Common Mistakes

Reference for whitelist subsetting edge cases: combining characters, ligatures across glyphs, kerning loss, and the silent failure when text doesn't match the whitelist.

OpenType Name Table Record IDs: Complete Reference

Reference table for every standard OpenType name record ID (0–25 + extras). What each ID means, which browsers read which IDs, and which can be safely stripped.

OpenType Ligature Features: Complete Reference

Reference for every OpenType ligature feature tag (liga, calt, dlig, hlig, rlig). What each does, browser support, and the CSS to control them.

Glyph Data Formats Reference: Names, Unicode, Metrics

Reference for OpenType glyph metadata: glyph index, post-table names, cmap-encoded Unicode, hmtx advance widths. What each field means and how the inspector surfaces it.

Font Name Table Records: Complete Reference

Reference for every standard OpenType name table record (0–25). What each ID means, whether browsers read it, and how the Metadata Extractor surfaces it.

Font Fingerprinting Edge Cases Reference

Reference for unusual fingerprinting scenarios: multi-version fonts, locale-encoded fonts, identical-rendering different bytes, and the deterministic-build trap.

Common Kerning Pairs and Their Typical Values

Reference of the 50 most commonly-kerned letter pairs in Latin typography, with typical kerning values. Useful for evaluating font quality and debugging spacing issues.

Unicode Blocks Reference for Font Selection

Reference of the most font-relevant Unicode blocks, their codepoint ranges, and the languages they support. Useful when matching fonts to audiences.

OpenType Metrics Tables: Complete Reference

Reference for OpenType vertical metrics: head, hhea, OS/2 (typo + win), post. What each table contains, which browsers prefer which, and how the analyser presents them.

OpenType Feature Tags: Complete Reference

Reference for the most common OpenType feature tags. What each does, when to use it, and the CSS to enable it. Covers Latin, CJK, Arabic, and complex scripts.

CJK Font Glyph Count Considerations

CJK fonts ship 5,000–50,000 glyphs by default. Subsetting to commonly-used codepoints saves 70–95%. Reference for CJK-specific glyph budget decisions.

@font-face Descriptors: Complete Reference

Reference for every @font-face descriptor: src, font-family, font-weight, font-style, font-display, unicode-range, ascent-override, descent-override, line-gap-override, size-adjust.

Typography CSS Variables: Naming Conventions Reference

Naming convention reference for typography tokens. Tailwind, Material Design, IBM Carbon, Atlassian — what each system calls its tokens and when.

Named Modular Ratios for Typography

Reference of every named modular ratio used in typography. Numeric value, design tone, and example sites that use each one.

System Fonts by OS: macOS, Windows, Android, iOS, Linux

Reference for the default UI font on each major OS. San Francisco, Segoe UI, Roboto, and friends — what's available where, with version requirements.

<link rel=preload> Attributes: Complete Reference

Reference for every <link rel=preload> attribute: as, type, href, crossorigin, media, fetchpriority, integrity. What each does and when to use it.

font-display Specification Reference

Complete font-display spec reference: timeline phases (block, swap, failure), all five values, browser support, and the precise behaviour per phase.

CSS clamp(): Specification Reference

Reference for CSS clamp(). Three-argument signature (min, preferred, max), how the preferred value is computed, browser support, and the math for fluid typography.

Dark Mode Typography: Quick Reference Checklist

Reference checklist for implementing dark mode typography correctly. Weight reductions, contrast ratios, off-white text, OLED considerations.

API Reference

1 guides

Google Fonts CSS

Google Fonts CSS API v2: The Reference

The complete /css2 reference: every URL parameter, every documented and undocumented axis, the User-Agent rules that decide WOFF2 vs TTF, real measured payload sizes (Hello World as text= is 1.4 KB; the full latin subset is 23.6 KB), and which of Google's documented requirements the API actually enforces — with an interactive URL decoder you can paste into.