Subsetting Web Fonts
Supriya Bisht avatar
Written by Supriya Bisht
Updated over a week ago

What is subsetting?

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.


Subsetting web fonts

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.

Subset_fonts.png

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:

Subsetting_options.png

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

All Characters

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

Common Character Subsets

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_languages.png

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

Specific_characters.png

Enter specific characters.

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

Specific_characters.png

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

Include Open Type Features

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.

Save_01

Heuristic subsetting and working with East Asian languages

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.


Legacy web projects and digital ads

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.

Did this answer your question?