Elegant: FontFont-Subsetter entschlackt Webfonts

Gestern star­tete FontShop einen cleveren Service für die Benutzer von Web-FontFonts … das sind inzwi­schen 6400 FontFonts in den Formaten .woff und .eot zum Einmallizenzieren und Selbsthosten (d. h. keine Abokosten): der Subsetter auf www​.subsetter​.com. Das Online-Tool ermög­licht auch Font-Technik-Laien, die Ausstattung ihrer Webfonts für die eigenen Zwecke maßzu­schnei­dern. Dabei lässt sich die Größe eines Webfonts auf bis zu 10 % redu­zieren, was bei den Empfängern eine Website für einen schnel­leren Seitenaufbau sorgt und beim Betreiber der Website für dras­tisch redu­zierten Traffic. Gleich auspro­bieren … wer gerade keinen Web-FontFont zu Hand hat, lädt sich die kosten­lose FF Nuvo Web.

Nachfolgend vier typi­sche Szenarien aus dem Leben eines Webdesigners und wie der FF-Subsetter helfen kann:

Fall 1: Sie möchten die sprach­lich gut ausge­stat­tete Schrift FF Celeste für der Website eines englisch-unga­ri­schen Verlags opti­mieren. Der Pro-Font im .eot-Format enthält die Schriftzeichen für Latin Extended, Cyrillic Extended und Neugriechisch.

Subsetting: Laden Sie die Fontdatei auf die Subsetter-Website, deak­ti­vieren Sie das Kerning (Browser, die EOT unter­stützen, igno­rieren Kerning-Tabellen), wählen Sie die Option »Keep only a Subset of Specified Characters« und deak­ti­vieren sie alle Sprachen außer Ungarisch und Englisch. So wird aus einer 316 K schweren CelesteWebPro-BookIta.eot eine 62 K leichte CelesteWebPro-BookIta_modified.eot … Ersparnis: 81 Prozent.

Fall 2: Sie sind vernarrt in die exzen­tri­schen Ziffern der FF Amman Black und möchten diese im Kalender Ihres Weblogs einsetzen.

Subsetting: Laden Sie Amman SC Web Black in den Subsetter (der Small-Caps-Schnitt enthält die eleganten Mediävalziffern als Standardzahlen), klicken Sie »Keep only a Subset of Specified Characters«, entfernen Sie das Häkchen bei »uncheck all cate­go­ries« und »uncheck all languages« und tippen Sie einfach die Zahlen 0123456789 in die Textbox. Während AmmanSansScWeb-Black.woff 33 K groß war, ist die neu entstan­dene AmmanSansScWeb-Black_modified.woff nur noch 8k groß … Ersparnis: 76 Prozent. Tip: Man kann auch einzelne Schriftzeichen aus der Tabelle im Subsetter in die Textbox kopieren.

Fall 3: Ich brauche eigent­lich auf meiner Website nur die Buchstaben für einen stati­schen Text, dessen Sprache und Inhalt ich aber noch nicht kenne …

Subsetting: Wenn Ihnen der frei­ge­ge­bene Text vorliegt, klicken Sie auf »Keep only a Subset of Specified Characters«, danach »uncheck all cate­go­ries« und »uncheck all languages«. Kopieren sie nun den Text in die Textbox und gene­rieren sie einen mageren Web-FontFont, der genau die Zeichen enthält, die für die Darstellung des Textes benö­tigt werden.

Fall 4: Ich möchte im Moment keinen Web-FontFont modi­fi­zieren, sondern einfach mal nach­schauen, welche Schriftzeichen enthalten sind und wie man auf sie zugreift.

Subsetter hilft: Laden sie den Web-FontFont auf die Subetter-Site, klicken Sie auf »Keep only a Subset of Specified Characters« und durch­forsten Sie nun nach Herzenslust die Glyphentabelle. Beim Überfahren eines Schriftzeichens erscheinen dessen Unicode-Bezeichnung und der Code. Verwenden Sie den Hex-Code um einen html-Schnipsel für das gewünschte Zeichen zu gene­rieren. Zum Beispiel gilt für die nach rechts zeigende weiße Hand in FF Scala: hex_0x261e –> html entity: ☞