How do you use web font subsetting and compression to reduce file size and bandwidth?

1 What is web font subsetting?

Web font subsetting is the process of removing unnecessary glyphs (characters) from a font file, leaving only the ones that are used on your website. For example, if your website is in English, you don't need to include glyphs for other languages or symbols that you don't use. Subsetting can significantly reduce the file size of your web fonts, making them faster to download and render.

2 How to subset your web fonts?

Subsetting your web fonts can be done with a variety of tools and methods, depending on the format and source of the fonts. Popular options include online services like Google Fonts or Font Squirrel, which offer subsetting options with font selection and generation. Desktop software like FontForge or Glyphs let you edit and subset fonts manually. Command-line tools such as pyftsubset or fonttools enable subsetting with scripts and parameters. After subsetting, make sure to test your web fonts for display accuracy and layout issues.

3 What is web font compression?

Web font compression is the process of reducing the file size of your web fonts by applying algorithms that remove redundant or unnecessary data. Compression can further improve your web fonts performance, especially for formats that are not optimized for the web, such as TrueType or OpenType.

4 How to compress your web fonts?

When compressing web fonts, there are various formats and levels of compression to choose from. Online services like Font Squirrel and Transfonter can be used to convert and generate web fonts with compression options. Alternatively, desktop software such as FontForge and Glyphs allow manual compression of font files. Command-line tools like woff2_compress and brotli also enable compression of font files with scripts and parameters. However, it’s important to check the quality and compatibility of your web fonts after compression, as some techniques may alter the appearance or functionality of your fonts.

5 How to serve your web fonts?

Optimizing web font performance and providing a better user experience for website visitors can be achieved by following certain web standards and best practices for serving web fonts. Utilize the @font-face rule in your CSS to declare and link your web fonts, as well as the font-display property to control how they are loaded and rendered. Additionally, select the most suitable web font format for your target browsers and devices, such as WOFF2, WOFF, or EOT. Furthermore, use HTTP/2 or HTTPS protocols to deliver your web fonts faster and more securely. Finally, consider hosting and distributing your web fonts globally via a content delivery network (CDN).

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?