Subsetting web fonts.

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.

 

In this article, we will look at the following topics:

  1. Subsetting web fonts

  2. Heuristic subsetting and working with East Asian languages

 


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 Subset Fonts button in the top-right corner.

    Subset fonts_01
  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:

    select style_01
    • 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.
         

        Common Character Subsets
    • Choose specific characters.

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

        subset fonts choose characters_01
    • Enter specific characters.

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

        Subset fonts specific characters_01
    • Include Open Type features.

      • Selected by default, 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!

Download & contact.

Download the Monotype App Download the Monotype App Contact us Contact us

Contact us.

Thank you for contacting us.

One of our support team members will contact you via email shortly.