Ladezeit optimieren mit Webfont-Subset

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Webfonts sind eine feine Sache. (Fast) jeder Wunsch nach einer individuellen Schriftart für die Website lässt sich damit erfüllen. Der Wermutstropfen dabei: Die Font-Dateien sind leider recht groß; 100 kB oder mehr können es schon mal sein. Wenn ich nun aber eine bestimmte Schrift nur für den Seitentitel brauche, also nur wenige Buchstaben?

Beispiel:

Urlaub in Bernau am Chiemsee

Die Original-Fontdatei für obige Demo "wiegt" 78 kB, das Subset, also die Fontdatei, die ausschließlich die für die Demo benötigten Zeichen "BCUabehilmnrsu" enthält, nur noch 5 kB.

Wie erstellt man so ein Subset?

Am einfachsten mit einem Online-Tool wie FontSquirrel.
Dort einstellen: Expert … – Custom Subsetting … – und dann im Feld Single Characters einfach den gewünschten Text eingeben. Also im Beispiel: "Urlaub in Bernau am Chiemsee"
Das erzeugte Subset downloaden, und wie üblich einbinden. Fertig.

Fazit:

Um 70 kB auf einer Website einzusparen, habe ich auch schon deutlich mehr Aufwand getrieben.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. Manuel schrieb am Donnerstag, 23.04.20 18:23 Uhr:

   BCUabehilmnrsu lol
   Aber im Ernst: Danke für den tollen Tipp.