1. Home
  2. Lessons
published
31 December 2024
by
Ray Morgan
updated
3 January 2025

Font Subsetting

Like raster images, font file can be big, so your strategy around how you load and cache them can have a substantial impact on your site's performance.

Fonts are loaded into HTML documents via the @font-face CSS directive. This directive can be configured so that only the necessary parts are loaded, and then only when they are needed.

Font subsetting is the process of reducing the size of a font file by including only the glyphs (characters) needed for a specific use case, such as a particular language or subset of text. This technique significantly reduces the file size and improves website performance, especially for global websites that might only need a portion of a font's full character set.

For example, if a website only needs to display Latin characters with basic punctuation, the font file can be subset to exclude glyphs for non-Latin scripts and advanced typographic features. Tools like Google Fonts' API or Font Squirrel's Webfont Generator can help generate subsetted font files:

@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0020-007F; /* Basic Latin */
}

This CSS example specifies that only the basic Latin character set (Unicode range U+0020 to U+007F) should be loaded.

Pre-Parsing and Font Subsetting

Pre-parsing and subsetting fonts are essential for optimizing performance in multilingual or complex web applications. The right tools and techniques can significantly enhance the user experience by balancing font flexibility with efficient resource usage.

When you specify a font subset in a @font-face declaration using the unicode-range property, the browser does not dynamically parse the font file each time the subset is called. Instead, the browser uses the unicode-range value to determine which portions of the font to load, provided the font file has been pre-parsed into subsets.

To optimize performance, it's common to use tools to pre-parse the font file into smaller subsets that include only the necessary glyphs. The browser then selects the correct subset to load based on the unicode-range property.

Performance Benefits of Pre-Parsing

Reduced File Size: Subsetting eliminates unnecessary glyphs, significantly shrinking font file size.

Faster Loading: Smaller font files mean quicker downloads and rendering.

Improved Caching: Different subsets can be cached independently, reducing redundant downloads for multilingual content.

How Subsetting Works in Practice

Full Font Loading (No Subsetting):
Without subsetting, the browser downloads the entire font file, regardless of the characters actually used. This can be inefficient for large fonts with extensive glyph sets.

Subset Font Loading (With Subsetting):
When a font is subsetted, the developer provides separate font files for different character ranges. The unicode-range property tells the browser which subset to use for a particular block of text.

Example:

@font-face {
  font-family: 'Noto Sans';
  src: url('noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0020-007F; /* Basic Latin */
}

@font-face {
  font-family: 'Noto Sans';
  src: url('noto-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

Here, the browser only loads the Latin or Cyrillic subset based on the characters present on the page.

Tools for Pre-Parsing Font Files into Subsets

To subset fonts and create optimized files, you can use the following tools:

The Google Fonts API automatically provides subsetted font files for many fonts. You can specify subsets in the URL parameters. For example:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&subset=latin,cyrillic" rel="stylesheet">

Font Squirrel Webfont Generator is a widely used tool for generating webfonts and subsetting fonts. It allows you to include specific glyph ranges or characters.

pyftsubset (Part of FontTools) is a Python-based tool for advanced font subsetting. For example, here is a command to subset a font:

pyftsubset font.ttf --unicodes=U+0020-007F,U+0400-04FF --output-file=font-subset.ttf

Glyphhanger scans your website or code for used characters and generates a font subset. Example usage:

glyphhanger --subset=your-font.woff2 --US_ASCII

Transfonter is a browser-based tool for converting and subsetting fonts. It is ideal for smaller projects where setting up local tools isn’t feasible.

Best Practices for Font Subsetting

  1. Analyze Your Needs: Use tools like Glyphhanger to analyze the characters used on your site and subset accordingly.
  2. Use Unicode Ranges Wisely: Ensure unicode-range matches your subsets to avoid loading extra subsets unnecessarily.
  3. Test Across Devices: Confirm proper rendering of all required characters, especially in dynamic content scenarios.
  4. Combine with CDN Delivery: Host subsetted fonts on a CDN for better caching and faster regional delivery.

Common Pitfalls

  1. Over-Subsetting: Creating too many subsets can lead to excessive HTTP requests, negating performance gains.
  2. Missing Glyphs: If a subset omits necessary glyphs, text may render incorrectly or not at all.
  3. Incorrect unicode-range: Misconfigured ranges can cause unexpected behavior or font fallback issues.
← Back Next →
✕