Wie man das Web Open Font Format (.woff) zur Nutzung benutzerdefinierter Schriftarten auf Webseiten nutzen kann, hab ich hier schon beschrieben. Seit damals (2011) hat sich an der Browser-Unterstützung des WOFF-Schriftformats einiges positiv verändert. Inzwischen unterstützen alle gängigen Browser WOFF-Schriftarten. Eine komplette Liste dafür gibt es hier. Anzeige
Viele Schriftdateien, viele WOFF-Dateien
Wenn auf einer Webseite allerdings mehrere Schriftarten oder Schriftfamilien zum Einsatz kommen und diese noch jeweils in normal, fett, kursiv und fett+kursiv vorhanden sein müssen, kann die Anzahl der Dateien – und damit HTTP requests – schnell etwas größer werden. Je größer die Anzahl an Schriften, desto mehr HTTP requests sind notwendig. Dies kann die Ladezeit von Webseiten negativ beeinflussen.
WOFF-Bündelung durch Base64-Kodierung
Webentwickler Sergej Müller zeigt in seinem Blog, wie WOFF-Dateien gebündelt werden können, was die Anzahl an HTTP requests deutlich verringert.
Dafür werden die WOFF-Dateien Base64-kodiert und der für jede WOFF-Datei erhaltene Text-Code in eine einzige CSS-Datei kopiert. Die CSS-Datei wird natürlich durch die integrierten Schriftarten etwas größer, deshalb sollte sie vom restlichen CSS der Seite getrennt werden. Da es sich bei der Kodierungs- und Bündelungsgeschichte meist um eine einmalige Aktion handelt, kann diese CSS-Datei anschließend noch komprimiert werden.
Eine detaillierte Anleitung und Vorteile dieser im ersten Moment etwas aufwändig wirkenden Methode liefert Sergej im Artikel Bündelung mehrerer WOFF-Dateien in GZIP-komprimiertem CSS.
Anzeige