Optimizing Font Files

This article guides you through the process of optimizing a standard TTF format form for the modern web. By doing so, you can significantly improve the loading speed and enhance the user experience, particularly for individuals accessing the font on poor network connections.

Optimizing font files consists of the following steps:

• Step 1: Download font files
• Step 2: Select the proper format
• Step 3: Choose the right characters
• Step 4: Generate a subset of characters
• Step 5: Set optimal font-display
• Step 6: Use optimised fonts

Step 1: Download font files

Use the font in this example, which you can download from Google Fonts.

These are the files you get after unpacking the downloaded zip file.

Step 2: Select the proper format

We employ the woff2 format in this example since our target audience comprises developers using modern browsers. The woff2 format is widely supported by browsers newer than IE 11, which is sufficient for our use case. For further details, you can visit caniuse.com to verify browser compatibility.

The woff2 format offers a significant size reduction compared to TTF alone. If you do not wish to perform subsetting, you can easily convert TTF to woff2 using any online converter, yielding immediate file size savings.

Step 3: Choose the right characters

Popular fonts often contain numerous unnecessary characters for your website. If your website primarily uses English, you typically only require English letters (uppercase and lowercase), numbers, punctuation marks, and special characters. Additional characters such as fancy quotes, dashes, or currency symbols may also be included. However, there is no need to include Greek letters or the Cyrillic alphabet.

You can go beyond the basic character set selection mentioned above to optimise your font usage. By choosing the characters you know will be utilised on your website and removing everything else, you can enhance performance and minimise the font file size.

You only need to use a basic character set for this use case:

• Letters:
• Numbers:
• Special characters:

Final set:

Step 4: Generate a subset of characters

To do the optimisation, you will need two tools in your system - and :

Install first (pip is a Python package manager):

And then (npm is the node package manager):

Now you can run glyphhanger on your font files. Glyphhanger has a lot of handy options, this tutorial uses and explains only a handful of them, but we recommend reading all the options available and experimenting with them.

The parameters used in the previous code example are described as follows:

• Define which output file formats you want your fonts in, as described in step #2.

• Specify the characters you want to include in your font, as described in step #3.

• Tells which files should be processed as input files. In this case, it will take all files from the current directory.

• Tells to print CSS after it's done, so you can easily copy it to your stylesheets.

After running the command, progress is displayed similar to the example below:

The example demonstrates a significant reduction in file size compared to their original counterparts. Specifically, all of these files now measure 124 KB, resulting in a reduction of 564 KB when compared to the original files.

Furthermore, a corresponding CSS file is generated for each font file. This CSS file can be conveniently copied and pasted into your stylesheets for easy integration.

Sample CSS file generated:

Step 5: Set optimal font-display

Incorporating the property is considered good practice.

Typically, it is advisable to utilise as it ensures the usage of your custom font. This property 'gives the font face an extremely small block period and an infinite swap period.' As a result, the font won't significantly hinder the page rendering process. Once downloaded, it will promptly replace the default font, improving the overall typography of the page.

In this particular use case, where the aim is to achieve optimal performance for a website, we have opted for a approach. This approach 'gives the font face an extremely small block period and a short swap period.' If the font fails to download within the specified timeframe, it will not be used on the website, although it will still be downloaded in the background. This strategy ensures the website prioritises rendering speed over font usage to deliver a high-performance browsing experience.

Although this approach may seem extreme, leveraging the browser cache means that the font will be utilised on subsequent page views. In such cases, there is a high likelihood that the user may only notice changes on the page if they specifically know what to look for.

Two positive effects are employed by using this approach:

• When the font is downloaded promptly, it will be utilised at an early stage, often before the user begins reading the text on the page. This approach ensures that the intended typography is presented without any noticeable delays.
• In cases where the font download is slower, it will be cached by the browser, preventing any interruption to the user's reading experience. The font will be seamlessly retrieved from the cache, ensuring a smooth and uninterrupted reading experience.

Step 6: Use optimised fonts

To utilise all the optimised fonts, you must define font faces in your CSS. Copy the CSS code generated by and adjust the file paths to match your specific environment.