Warum sollten die verwendeten Webschriftarten optimiert werden?
Die Größe und damit die Ladezeit einer Webseite steigt mit jedem Text, mit jedem verwendeten Bild, mit jeder CSS-Formatierung, mit jedem Javascript Snippet und natürlich auch mit der Verwendung von Schriftarten (Custom Webfonts).
Es liegt also nahe, die Datenmenge bestmöglich zu reduzieren, ohne das die Qualität der Webseite leidet.
Verwende maximal 2 Schriftarten auf deiner Webseite
Schriftarten sind passend eingesetzt ein wichtiger Designfaktor. Optisch unterschiedliche Schriftarten bzw. Schrifttypen können den Text optisch aufbereiten und die Lesbarkeit erhöhen. Verwende maximal 2 Schriftarten, da die Webseite sonst schnell unstrukturiert und unruhig wirkt. Zudem erhöht sich die Ladezeit nicht unerheblich.
Schauen wir uns jetzt eine typische Dateigröße verschiedener Schriftarten an, die gerne auf Webseiten verwendet werden.
- Poppins Black = 148KB
- Roboto Black = 165KB
- Montserrat Black = 194KB
- Open Sans ExtraBold = 128KB
Bei der Verwendung von lediglich einer Schriftart, z.B. Poppins mit 2 Schrifttypen, wie Regular und Bold steigt die Datenmenge schnell auf ca. 300KB.
Quelle: fonts.google.com
Warum haben viele beliebte Schriftarten solche Dateigrößen?
Die Dateigröße schwankt je nach der Menge bzw. des Umfangs an Zeichen, Glyphen die in der Schriftart enthalten sind.
Umlaute, Zahlen, Groß- und Kleinbuchstaben, Sonderzeichen usw. erhöhen die Dateigröße enorm.
Dabei spielt es keine Rolle, ob alle Zeichen auf der Webseite Verwendung finden. Es wird immer die volle Schriftart, mit allen Zeichen geladen.
Auf geht’s… ausfüllen, absenden, bestätigen und profitieren.
Wie groß sind meine verwendeten Fonts und wie lange laden diese?
Um die Größe und Ladezeit der verwendeten Webfonts zu ermitteln, öffne deinen Webbrowser und die Entwicklertools. Im Chromebrowser geht das mit der Tastenkombination Strg+Umschalt+j oder auch Strg+Umschalt+i.
Im nachfolgenden Screenshot siehst du die Einstellung:
Klicke in den Entwicklertools auf Netztwerk, dann dort auf Schriftarten und lade mit Strg+r deine Webseite neu. Jetzt siehst du rechts die Ladezeit und die Größe der Fonts.
Du möchtest mehr Details der Schriftart sehen?
Mit dem kostenlosen Onlinetool FontDrop kannst du sehen wie viele Glyphen, Sprachen etc. deine verwendete Schriftart im Urpsrungszustand verwendet.
Das ist sehr interessant.
Du kannst auch so leicht, nach dem Subsetting die Schriftart prüfen, ob alle benötigten Glypen etc. enthalten sind.
FontDrop*
https://fontdrop.info/
* Wird bei einem Klick in einem neuen Fenster geöffnet
Mit Font Subsetting eine Schriftart optimieren und die Ladezeit verbessern
Subsetting kommt von Subset. Von Subset spricht man, wenn man eine Untermenge aus Daten entfernt. In unserem Fall das Entfernen von nicht benötigten Zeichen aus einer Schriftart.
Schauen wir uns jetzt an, wie einfach das Subsetting funktioniert.
- 1. Schriftart herunterladen
- 2. Ein Subsettool aufrufen
- 3. Automatisch Zeichen entfernen lassen
- 4. Optimierte Schriftart/en herunterladen
Subsettool aufrufen und Schriftart optimieren
Fontsquirrel - Webfont Generator*
https://www.fontsquirrel.com/tools/webfont-generator
* Wird bei einem Klick in einem neuen Fenster geöffnet
Im Video zeige ich die einzelnen Font Subsetting Schritte.
Fehlermeldung: The font is corrupt and cannot be converted?
Öffne folgende Webseite: https://everythingfonts.com/subsetter und lade dort deine Webfont/s als z.B. TTF hoch und nehme die Einstellungen, wie im folgenden Screenshot zu sehen vor. Verwende diese Font dann zur Konvertierung mit Font Squirrel, wie im oberen Video beschrieben.
Wichtige Hinweise vor dem Font Subsetting
Fazit: Optimiere jetzt deine Webseitenfonts und verbessere damit die Ladezeit deiner Webseite
Das Font Subsetting spart einiges an Dateigröße, die nicht geladen werden muss. Mit dem Subsettool von Fontsquirrel ist es für jeden leicht umzusetzen.
