FontFont Subsetter Elegantly Slims Down Webfonts

One of the topics Rudy and I talked about during our hour-long conversation about typography and the web on FWAwebTV was the need for a unified font format. A decade ago we almost got there with OpenType providing a cross-platform solution for both Mac OS and MS Windows. Unfortunately it seems as if we're heading in the wrong direction with OpenType Standard, Pro, and Com; Office fonts; webfonts in EOT and WOFF, … The situation as it is now can be very confusing for the user trying to figure out what font format is needed for a specific application. All those different formats co-exist to compensate for inconsistencies in operating systems, programming languages and code, software, and so on … Regular OpenType fonts are ill-adapted for screen display in small type sizes and the files are too large to be used in web pages, hence the need for web fonts in EOT and WOFF format. And because office applications still can't access specific features OpenType fonts had to be reverted back to separate fonts for different types of numerals, small caps, and so on – very similar to the Expert and SC & OsF fonts before the advent of OpenType. Ideally there should be one unified font format: OpenType Pro. Optimising it for specific usages should happen on the software side, not on the font side.

But now FontShop has taken a first step in the right direction again. Just before I took my week off they unveiled a clever service for users of Web FontFonts, whose number has grown to 64,000 FontFonts in .woff and .eot format available for licensing and self-hosting (no subscription fee). The free online tool FF Subsetter enables even font technology laymen to tailor webfonts to perfectly suit their needs. Web FontFonts can be reduced up to a measly 10% of their original file size, drastically increasing the speed of web page rendering for visitors, optimising bandwidth usage, and reducing high-traffic costs for website owners. Try out FF Subsetter right now; if you haven't licensed a Web FontFont yet download FF Nuvo Web for free. To illustrate the benefits of this free online tool FontFont provided a number of typical scenarios from the day-to-day practice of web designers.

Click the image to see the full-size screenshot.

Case 1:The linguistically fully-equipped FF Celeste Web Pro needs to be optimised for the website of an English-Hungarian publishing house. The Pro font in .eot format contains all necessary characters and accents for Latin Extended, Cyrillic Extended and modern Greek.

Subsetting:Upload the font files to the Subsetter website. Deactivate the kerning (browsers which support EOT ignore Kerning tables), select the option "Keep only a Subset of Specified Characters" and deactivate all languages except Hungarian and English. The 316 Kb large CelesteWebPro-BookIta.eot becomes a compact 62 Kb CelesteWebPro-BookIta_modified.eot, saving 81% on the original font file size.

Click the image to see the full-size screenshot.

Case 2:You really like the eccentric numerals of FF Amman Sans Black and would like to use them in the calendar of your blog.

Subsetting:Upload Amman Sans SC Web Black to the Subsetter website (the Small Caps weight contains the elegant oldstyle figures as default numerals). Select the option "Keep only a Subset of Specified Characters", click the buttons "Uncheck all categories" and "Uncheck all languages", then simply type the numbers 0123456789 into the text box. While AmmanSansScWeb-Black.woff was 33 Kb large, the newly generated AmmanSansScWeb-Black_modified.woff is a mere 8 Kb, saving 76% on the original font file size.

Handy tip: Individual characters can also be copied from the table in the Subsetter into the text box.

Click the image to see the full-size screenshot.

Case 3:On your website you actually need only the letters for a static text, but don't know the language nor content yet…

Subsetting:If you have the approved, final version of the text, select the option "Keep only a Subset of Specified Characters", and click the buttons "Uncheck all categories" and "Uncheck all languages". Now copy said text into the text box and generate a lean Web FontFont containing just the characters needed for displaying your text.

Click the image to see the full-size screenshot.

Case 4:You don't need to modify any Web FontFont for the moment, but would like to verify which characters are present in its character set and how they can be accessed.

Subsetter helps:Upload the Web FontFont to the Subsetter website, select the option "Keep only a Subset of Specified Characters" and browse the Glyph table at your leisure. Hovering the cursor over a character reveals its Unicode number and code. Use the Hex code in a HTML clipping to generate the desired character. For example the white hand in FF Scala is accessed by hex_0x261e or HTML entity ☞

Case 5:Instead of the lining figures which stand out too much in body text many designers wish to use oldstyle figures on webpages. The Subsetter enables the user to switch the numeral sets.

Header image:Mr. Morrin's vise & work bench by Joel Del Castillo