Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 20. Mai 2015

Platzsparende Webfonts mit WOFF 2.0

Während man in den Anfängen der Webfonts noch mehrere Dateiformate zur Verfügung stellen musste, hat sich das WOFF-Format mittlerweile zum Standard entwickelt, der von allen modernen Browsern unterstützt wird. Ältere Formate wie das EOT-Format braucht man nur noch, wenn man den Internet Explorer vor Version 9 unterstützen möchte. Nachdem das WOFF-Format im Jahr 2012 offizieller Standard wurde, gibt es mittlerweile mit WOFF 2.0 eine Weiterentwicklung, die vor allem über eine bessere Kompression verfügt und somit für kleinere Dateien sorgt.

woff-teaser

Bis zu 50 Prozent kleinere Dateien

„Brotli“ heißt das neue Kompressionsverfahren, das in WOFF 2.0 eingesetzt wird. Es löst die bisher verwendete LZMA-Komprimierung ab. Der „Brotli“-Algorithmus wurde von Google entwickelt und verspricht eine Größenreduzierung der Schriftdateien von bis zu 50 Prozent gegenüber WOFF 1.0. In der Praxis dürfte dieser Wert zwar kaum erreicht werden. Allerdings sind Reduzierungen von bis zu 30 Prozent durchaus realistisch.

Der Schriftenanbieter MyFonts, der auch unzählige Webfonts im Repertoire hat, gibt an, dass seine Schriften eine durchschnittliche Größenreduzierung von 30 Prozent im Vergleich zu WOFF 1.0 aufweisen. Als Beispiel wird die „Proxima Nova Bold“ genannt. Diese hat im WOFF-1.0-Format eine Dateigröße von 60 Kilobyte. Im neuen WOFF-2.0-Format sind es nur noch 44 Kilobyte. Das ist eine Reduzierung von 27 Prozent.

myfonts_proxima-nova-medium
Proxima Nova Bold“ als Webfont my MyFonts

Während der LZMA-Algorythmus grundsätzlich verlustfrei ist, ist „Brotli“ funktionell verlustfrei. Bei der Kompression werden einige redundante Informationen entfernt. Andere Informationen, die aus der ursprünglichen Schrift entfernt werden, lassen sich während der Dekompression wiederherstellen. Laut W3C-Angaben soll diese sogenannte funktionelle Verlustfreiheit nicht nachteilig sein.

Einen kleinen Nachteil gibt es dann aber doch noch bei WOFF 2.0: Die Dekompression der per „Brotli“ reduzierten Dateien dauert länger als beim LZMA-Algorithmus der WOFF-1.0-Schriften. Mehr als doppelt so schnell ist die Dekompression des LZMA-Algorithmus.

Erste Schriften in WOFF 2.0 verfügbar

Obwohl WOFF 2.0 noch kein offizieller W3C-Standard ist, bieten die ersten Schriftenhäuser ihre Webfonts bereits im neuen Format an. So gehört WOFF 2.0 bei MyFonts mittlerweile zu den unterstützen Webfont-Formaten. Wer bereits Webfonts bei MyFonts erworben hat, kann sich diese nun auch im neuen Format WOFF 2.0 herunterladen. Mitbewerber Linotype stellt seine Webfonts ebenfalls im WOFF-2.0-Format bereit. Auch hier erhalten Bestandskunden die WOFF-2.0-Schriften ohne zusätzliche Kosten.

fontsquirrel-webfont-generator
Der Webfont-Generator von Font Squirrel

Im Bereich der kostenfreien Webfonts setzt sich WOFF 2.0 ebenfalls Schritt für Schritt durch. So gibt es die Möglichkeit, mit dem Webfont-Generator von Font Squirrel auch Schriften im Format WOFF 2.0 auszugeben. Und auch Google stellt seine Webfonts im neuen Format zur Verfügung. Andere Anbieter werden sicher nachziehen, sobald WOFF 2.0 offizieller Standard und die Browserunterstützung etwas breiter ist.

Noch geringe Browserunterstützung

Derzeit unterstützen nur Chrome ab Version 41 und Opera ab Version 27 das neue WOFF-2.0-Format. Für Firefox ist eine Unterstützung ab Version 39 vorgesehen.  WOFF 2.0 ist aber in den Nightlys bereits aktiviert. Bei den mobilen Browsern sind es nur der Android-Browser sowie Chrome für Android, die WOFF 2.0 unterstützen.

Da sich per CSS mehrere Webfont-Formate angeben lassen, kann man WOFF 2.0 derzeit durchaus schon einsetzen. Aufgrund der noch zurückhaltenden Browserunterstützung sollte man zusätzlich aber auch immer noch WOFF-1.0-Schriften berücksichtigen.

@font-face {
  font-family: "Open Sans";
  src: url("opensans.woff") format("woff"), url("opensans.woff2") format("woff2");
}

Das Beispiel zeigt, wie man sowohl WOFF- als auch WOFF-2.0-Webfonts per „@font-face“-Regel in ein Stylesheet einbindet.

Fazit und Links zum Beitrag

Trotz immer schnellerer Internetanbindung ist es nach wie vor wichtig, Websites klein zu halten – vor allem, um die Datenübertragung beim mobilen Surfen möglichst gering zu halten. Daher ist die starke Kompression des neuen Webfont-Formats Grund genug, auf WOFF 2.0 umzusteigen. Dank entsprechender Fallbacks bleibt auch kein Browser außen vor.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Kommentare

  1. Das Beispiel für das Einbinden ist fehlerhaft. Chrome würde in dem Fall das woff-Format einbinden, da es noch vor dem woff2 definiert ist.

    „Es kommt auf die Reihenfolge an, in der die Schriftvarianten angegeben werden. Der Browser wählt das erste unterstützte Format aus. Wenn Sie also wünschen, dass die neueren Browser WOFF2 verwenden, ist die WOFF2-Deklaration vor WOFF anzuordnen und so weiter.“
    Abschnitt „Schriftartfamilie mit @font-face definieren“ https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=de

  2. WOFF 1.0 is based on deflate (gzip), not LZMA. LZMA was considered for WOFF 2.0, but abandoned party for its slow decoding speed.

  3. Lass mich raten: „WOFF“ => „Wuff“ beim Hund => Hund als Symbolbild? ;-)

Schreibe einen Kommentar zu Uwe Antworten abbrechen

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