Subsetting Web Fonts

When deploying web fonts for use in web applications, page performance and, by extension, optimizing font file sizes are critical. Subsetting is the process of including only what is needed in a font, and it has an almost 1:1 impact on your fonts’ file sizes.

Professionally designed fonts have support for multiple languages, OpenType features, special characters and symbols, and more. Therefore, for example, if your web application only needs to support one language, you can significantly improve your applications’ performance and page load times by employing font subsetting in your web projects and digital ads, so that only the characters and glyphs needed for that language are included.

Now, let’s take a look at how you can subset fonts in your web projects and digital ads:

1. Begin by clicking on your web project—in this case, our sample web project named “Web Project 01”—to open it in the main view on the right.

2. Once your web project is open in the main view, click the Subset Fonts button on the top right.

3. On the left of the “Subsetting fonts” dialog, select the font style(s) you’d like to subset. This brings up subsetting options on the right, as shown below:

All characters: Selected by default, this setting includes all glyphs that are supported by the font style.

Common characters: Select this option to include the most frequently used glyphs and characters of Latin-based languages, which should work in most cases.

Choose languages: Select this option to specify exactly the languages (and the associated character sets) you need to support. If any of the CJK languages are selected, then the web font will be heuristically subsetted automatically for faster performance.

Choose specific characters: Select this option to choose specific glyphs from a character set to include in your font.

Enter specific characters: Select this option to only include the characters you specify in the font file, excluding everything else.

Include OpenType features: Use this option to include OpenType features such as alternate characters, ligatures, and more.

Note: As you make subsetting choices, you will be able to see the resulting changes in the file size for your selected style.

4. Once finalized, click on the Save button.

Heuristic subsetting provides pre-sliced subsets of characters based on the usage frequency of the characters in a language. This helps browsers to quickly render fonts in right style, as the CDN delivers only the subset that contains the requested glyphs. This is instead of having to subset the font file in real time as the browser requests each set of glyphs, which causes the browser to take more time to render the text in the correct style in the case of dynamic subsetting.

Dynamic subsetting has been deprecated on Monotype Fonts, and all CCJK web fonts can be heuristically subsetted by choosing the CCJK languages in the "Choose languages" subsetting option.

We’ve introduced a new generation of web font and digital ad hosting services. This means we have sunsetted the old technology and now restrict what you can do with old web projects and digital ads. Click here for more details.