Complete Guide to Font Subsetting

How Subsetting Works

The subsetting process extracts only specified characters:

1. Character Selection: You specify which characters to include (A-Z, a-z, 0-9, etc.) using Unicode ranges or explicit character lists
2. Glyph Extraction: Subsetting tool extracts only the selected glyph outlines from the original font file
3. Table Optimization: Font tables (cmap, glyf, glyph positioning) are rebuilt containing only necessary data
4. Feature Preservation: OpenType features like ligatures and kerning are maintained for included glyphs
5. Output: Result is a complete, valid font file that's dramatically smaller but functionally identical for your character set

Business Impact

• Higher conversion rates: Every 100ms improvement can increase conversions by up to 1% (Amazon, Walmart studies)
• Lower bounce rates: 53% of mobile users abandon pages taking longer than 3 seconds (Google)
• Better SEO: Page speed is a ranking factor, especially for mobile searches
• Reduced costs: 156 KB × 100,000 visitors = 15.6 GB saved in bandwidth per 100K visitors
• Mobile experience: Dramatic improvement on slower 3G/4G connections in emerging markets

2. Content-Based Subsetting (Maximum Optimization)

Analyze your actual website content to include only characters you use:

pyftsubset (FontTools - Advanced Users)

Python-based tool with extensive options and fine control.

pip install fonttools brotli

pyftsubset font.ttf \
  --output-file=font-subset.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153"

Unicode-Range Progressive Loading

Create multiple subsets and let browser download only what's needed:

/* Core characters - always loads */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-core.woff2') format('woff2');
  unicode-range: U+0020-007F;  /* ASCII */
}

/* Extended Latin - loads only if page uses these */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-extended.woff2') format('woff2');
  unicode-range: U+0100-017F;  /* Latin Extended-A */
}

/* Symbols - loads only if needed */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-symbols.woff2') format('woff2');
  unicode-range: U+2000-206F;  /* Punctuation */
}

Automated Build Integration

Integrate subsetting into your build process:

{
  "scripts": {
    "subset-fonts": "glyphhanger --whitelist=U+0000-017F --subset=fonts/*.ttf --formats=woff2,woff",
    "build": "npm run subset-fonts && next build"
  }
}

Content Monitoring

Set up monitoring to detect missing characters in production:

// Detect missing glyphs
document.fonts.ready.then(() => {
  const text = document.body.innerText;
  const uniqueChars = [...new Set(text)];
  
  uniqueChars.forEach(char => {
    if (!document.fonts.check('16px Roboto', char)) {
      console.warn('Missing glyph:', char);
      // Send to monitoring service
    }
  });
});