Subsetting Fonts

On pennydreadfulmagic.com we use a bunch of unicode symbols for everything from pagination (←→) to tagging external links (↑) to indicating that a specific card has a bug (🐞).

Lots of these symbols are present in the glyphs of our main body text font. But some are not. These rely on the system of the viewer to display. Sometimes they look ugly and sometimes they aren’t present at all and get the ugly square box treatment.

To work around this I want to supply a font that provides versions of the glyphs that aren’t present in the base font. But something fonts like Symbola that provide complete coverage of unicode start at about 1.5MB and go up. That’s a high price to pay for a handful of symbols!

One solution is font subsetting. You can make a version of a font that only contains the symbols you are going to use. It will be much smaller. Our subsetted version of Symbola is more like 15KB as an inline woff in the CSS file. A big saving.

You can subset fonts online very simply with the super useful Transfonter.

Leave a Reply

Your email address will not be published.