Subsetting web fonts

Parmvir Singh
Parmvir Singh
  • Updated

What is subsetting?

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

Professionally designed fonts have support for multiple languages, open-type features, special characters & 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 only including characters and glyphs needed for that language, by utilising font subsetting options in your web projects and digital ads.

Subsetting web fonts. 

And 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 on the SubsetFonts button in the top-right.

Subset_fonts.png

3. In the “Subsetting fonts” dialog, on the left, 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 & characters of Latin based languages that should work in most cases.Common Character Subsets

Choose languages.

  • Select this option to specify exactly the languages you need to support, and therefore, the resultant character set.
  • 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.

  • Select this option to only include the input characters in the font file, excluding everything else.

Specific_characters.png

Include Open Type features.

  • Use this option to include Open Type features such as alternate characters, ligatures and more.

Include Open Type Features

  • You will be able to see changes in the resulting file- size for the selected style as you make subsetting choices.

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 frequency of usage of the characters in a language. This helps browsers to quickly render fonts in right style as the CDN delivers only that subset which contains the requested glyphs instead of it having to subset the font file in real time as browser makes request for each set of glyphs, causing the browse to take more time to render the text in correct style in case of dynamic subsetting.

Dynamic subsetting has been deprecated on Monotype Fonts and all CCJK web fonts can be heuristically subsetted by simply 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 restrict what you can do with old web projects and digital ads. Here is a link to that detailing!

 

Was this article helpful?

0 out of 0 found this helpful