The wide availability of web fonts has enabled sites to become typographical wonderlands, at the cost of increased page size and longer load times. Performance-focused developers already optimize their images and CSS; it makes sense that we should also optimize web fonts.

The good news is that doing is fairly easy: by creating your own custom font or supplying your web font hosting service with a simple variable value, you can load only the glyphs that you need for the text you have on the page, rather than the entire range of characters, numbers and symbols in the font, reducing page load times.

Font subsetting can be very effective, provided you keep two conditions in mind:

• In order to use the most effective versions of this technique – loading a limited range of characters from the font – you should be certain that text rendered in that font will not change substantially in the future, as glyphs that aren’t explicitly loaded won’t display correctly.
• If you are self-hosting the web font, you should ensure that non-WOFF fonts are gzipped first, which will save an average of 40 ~ 70% on file size, before turning your attention to gaining advantages from subsetting.

Subsetting Google Fonts

The most popular web font hosting provider has a number of options for subsets. The first is already built-in:

By default, sites will download only the Latin character subset (uppercase and lowercase A – Z, numerals, and punctuation). The “extended” Latin character subset option should contain the additional characters used in other European languages: accented characters, umlauts, and the like, but the quality and extent of these characters as delivered by Google is often limited: you may, in some situations, want to host the font yourself to gain access to the complete character set.

The subsetting options can also be changed in the font request URL:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext,latin" rel="stylesheet">

Limiting Google Fonts To Particular Characters

You can also limit the request to just the characters you need by using a text URL variable:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

This will serve only the “H”, “e”, “l” and “o” Open Sans characters from Google, significantly reducing the size of the font request:

Full request (no subsetting):

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Subsetted request

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

This technique is perfect for webfonts used to render logos or set headlines, where the characters used will always be known in advance. Note that you can start to get into trouble if your text contains characters that are outside the stated range:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Add this CSS below it:

h1 { 
	font-family: Open Sans, sans-serif;
}

Applied to this markup:

<h1>Hello, Frendo</h1>

You can see that the “F”. “r”, “n” and “d” characters do not render correctly, as they weren’t specified in our original request.

Subsetting Typekit Fonts

It’s also possible to subset Typekit fonts, albeit in a more limited fashion: currently the feature is in beta, limited to users who opt into Typekit’s Early Access program, with subsetting restricted to language glyphs.

Most other font hosting services, such as fonts.com, offer variations of this technique; you should consult their documentation to find out more.

As adding repeated characters into the request string is redundant, I’ve created a quick little JavaScript tool that will display the unique characters from any string or phrase, ordered alphabetically, to help you construct your own requests.

Subsetting Self-Hosted Web Fonts

You can also subset fonts from your own server by creating a custom font that contains only the glyphs you want.

The easiest way to do that currently is by using the Expert option in the Font Squirrel webfont generator service:

In this case, I’ve decided that I only want to use capital letters from the Lobster font. Extracting these into a webfont yields a much smaller file than the original:

lobster.woff	62KB
lobster-caps.woff	7.7KB

I can assure that uppercase letters will only be typeset in Lobster on my site by stating so in my CSS:

@font-face { 
	font-family: Lobster;
	src: url("Lobster/lobster-caps.woff");
}
h1 { 
	font-family: Lobster;
	text-transform: uppercase; 
}

Conclusion

Subsetting your fonts can be an extremely powerful and useful tool, but needs to be carefully considered and planned for. The demands of designers, content providers and  translators should all be considered when choosing what text range to use in a font subset.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.