Dynamic Subsetting in Typekit nutzen

Typekit bietet eine große Auswahl von Schriften zur einfachen Nutzung im Web und in Desktop-Programmen. Bei der Nutzung als Webfont sollten die Font-Dateien natürlich möglichst klein sein und seit 2015 bietet Typekit mit Dynamic Subsetting dafür eine nützliche Funktion an.

Update vom 6. November 2017: Heiko Mamerow ist bei einem kurzen Test aufgefallen, dass seine Site mit Dynamic Subsetting mehr Requests macht und ein bisschen schwerer ist:

Als ich daraufhin auch auf meiner Site verglichen habe, wurden für eine der zwei getesteten Ansichten ebenfalls mehr Daten gezogen als mit der CSS-Einbindung. Ich werde deshalb wieder zurück zu der CSS-Variante wechseln – Dynamic Subsetting lohnt sich also nicht in jedem Fall.

Über Dynamic Subsetting werden nur die Zeichen eines Fonts geladen, die auf der gerade angesehenen Seite der Website auch wirklich genutzt werden – das kann die Dateigröße für die Schriften teis stark reduzieren. Eingeführt wurde diese Funktion, als Typekit die Unterstützung für chinesische, japanische und koreanische Fonts hinzugefügt hat, da solche Fonts extrem viele Zeichen beinhalten und dementsprechend groß sind (mehrere Megabyte).

Detailansicht des Kits für diese Site mit der Option des dynamischen teilweisen Ladens. (Screenshot: Typekit)

Diese Option steht nicht für alle Kits standardmäßig zur Verfügung. Um sie zu aktivieren, müsst ihr einen Font hinzufügen, der Chinesisch, Japanisch oder Koreanisch unterstützt – zum Beispiel Source Han Sans Japanese. Ihr werdet gefragt, ob ihr das bestehende Kit in ein dynamisches Kit umwandeln möchtet und erhaltet nach Bestätigung für Zeichensatz die Option Dynamisches teilweises Laden, wie im Screenshot zu sehen ist.

Jetzt könnt ihr den Source-Han-Sans-Font wieder entfernen und die Option für die Schrift(en) des Kits aktivieren. Ein bisschen schade finde ich, dass ich dafür auf die neue Möglichkeit der CSS-Einbindung verzichten und den Weg über das JS-Snippet gehen muss, aber die gesparten Kilobytes sind mir da wichtiger als dass auch ohne JS der richtige Font angezeigt wird 🙂

Veröffentlicht in Tipps

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert