Reduce Font File Size by Subsetting Fonts for Font Hero

Most fonts include hundreds of characters your design never uses, and your visitors download all of them on every font load. To reduce font file size, subset the font to only the character sets your language needs before you upload it to Font Hero. In this video we take Open Sans Regular from a 63 KB download to 20–28 KB with the free Transfonter tool.

Why default fonts are bigger than they need to be

Open the Glyphs tab for Open Sans on Google Fonts and scroll through it. Most of those characters belong to languages you are not writing in. You never type them, but a full font file still includes them, and every page that uses the font loads them too.

Subset a static font with Transfonter

Transfonter.org is a free online @font-face generator. Other tools can do the same job, but we find this one convenient. We use a static font here. Variable fonts get their own video.

1. Go to transfonter.org and click Add fonts. From the Open Sans download, choose a file in the static folder. We use Open Sans Regular (130 KB as TTF).
2. Leave Formats on WOFF2.
3. Leave Subsets on All and click Convert. The download is 63 KB. That is our starting point.
4. If you design for a site in the US, open Subsets and select only Latin. Convert again and the download is 20 KB.
5. If you design for European languages, you will need some of the accented characters too. Select Latin and Latin Extended (the field shows 2 items selected) and convert again. The download is 28 KB.
6. Click Download and unzip the file. Inside you get subset-OpenSans-Regular.woff2 at 25 KB, next to demo.html and stylesheet.css.

Upload the optimized file to Font Hero

The .woff2 file is ready to upload straight into Font Hero. You end up with a 25 KB file where you had about 60 KB.

That is the saving for one font weight. With five or more weights, you save that much on each one. Subset every font you use to the language you are designing for.

Get Font Hero → dplugins.com