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 meh­re­re Dateiformate zur Verfügung stel­len muss­te, hat sich das WOFF-Format mitt­ler­wei­le zum Standard ent­wi­ckelt, der von allen moder­nen Browsern unter­stützt wird. Ältere Formate wie das EOT-Format braucht man nur noch, wenn man den Internet Explorer vor Version 9 unter­stüt­zen möch­te. Nachdem das WOFF-Format im Jahr 2012 offi­zi­el­ler Standard wur­de, gibt es mitt­ler­wei­le mit WOFF 2.0 eine Weiterentwicklung, die vor allem über eine bes­se­re Kompression ver­fügt und somit für klei­ne­re Dateien sorgt.

woff-teaser

Bis zu 50 Prozent kleinere Dateien

„Brotli“ heißt das neue Kompressionsverfahren, das in WOFF 2.0 ein­ge­setzt wird. Es löst die bis­her ver­wen­de­te LZMA-Komprimierung ab. Der „Brotli“-Algorithmus wur­de von Google ent­wi­ckelt und ver­spricht eine Größenreduzierung der Schriftdateien von bis zu 50 Prozent gegen­über WOFF 1.0. In der Praxis dürf­te die­ser Wert zwar kaum erreicht wer­den. Allerdings sind Reduzierungen von bis zu 30 Prozent durch­aus rea­lis­tisch.

Der Schriftenanbieter MyFonts, der auch unzäh­li­ge Webfonts im Repertoire hat, gibt an, dass sei­ne Schriften eine durch­schnitt­li­che Größenreduzierung von 30 Prozent im Vergleich zu WOFF 1.0 auf­wei­sen. Als Beispiel wird die „Proxima Nova Bold“ genannt. Diese hat im WOFF-1.0-Format eine Dateigröße von 60 Kilobyte. Im neu­en 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 grund­sätz­lich ver­lust­frei ist, ist „Brotli“ funk­tio­nell ver­lust­frei. Bei der Kompression wer­den eini­ge red­un­dan­te Informationen ent­fernt. Andere Informationen, die aus der ursprüng­li­chen Schrift ent­fernt wer­den, las­sen sich wäh­rend der Dekompression wie­der­her­stel­len. Laut W3C-Angaben soll die­se soge­nann­te funk­tio­nel­le Verlustfreiheit nicht nach­tei­lig sein.

Einen klei­nen Nachteil gibt es dann aber doch noch bei WOFF 2.0: Die Dekompression der per „Brotli“ redu­zier­ten Dateien dau­ert län­ger als beim LZMA-Algorithmus der WOFF-1.0-Schriften. Mehr als dop­pelt so schnell ist die Dekompression des LZMA-Algorithmus.

Erste Schriften in WOFF 2.0 verfügbar

Obwohl WOFF 2.0 noch kein offi­zi­el­ler W3C-Standard ist, bie­ten die ers­ten Schriftenhäuser ihre Webfonts bereits im neu­en Format an. So gehört WOFF 2.0 bei MyFonts mitt­ler­wei­le zu den unter­stüt­zen Webfont-Formaten. Wer bereits Webfonts bei MyFonts erwor­ben hat, kann sich die­se nun auch im neu­en Format WOFF 2.0 her­un­ter­la­den. Mitbewerber Linotype stellt sei­ne Webfonts eben­falls im WOFF-2.0-Format bereit. Auch hier erhal­ten Bestandskunden die WOFF-2.0-Schriften ohne zusätz­li­che Kosten.

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

Im Bereich der kos­ten­frei­en Webfonts setzt sich WOFF 2.0 eben­falls 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 aus­zu­ge­ben. Und auch Google stellt sei­ne Webfonts im neu­en Format zur Verfügung. Andere Anbieter wer­den sicher nach­zie­hen, sobald WOFF 2.0 offi­zi­el­ler Standard und die Browserunterstützung etwas brei­ter ist.

Noch geringe Browserunterstützung

Derzeit unter­stüt­zen 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 vor­ge­se­hen.  WOFF 2.0 ist aber in den Nightlys bereits akti­viert. Bei den mobi­len Browsern sind es nur der Android-Browser sowie Chrome für Android, die WOFF 2.0 unter­stüt­zen.

Da sich per CSS meh­re­re Webfont-Formate ange­ben las­sen, kann man WOFF 2.0 der­zeit durch­aus schon ein­set­zen. Aufgrund der noch zurück­hal­ten­den Browserunterstützung soll­te man zusätz­lich aber auch immer noch WOFF-1.0-Schriften berück­sich­ti­gen.

@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 ein­bin­det.

Fazit und Links zum Beitrag

Trotz immer schnel­le­rer Internetanbindung ist es nach wie vor wich­tig, Websites klein zu hal­ten – vor allem, um die Datenübertragung beim mobi­len Surfen mög­lichst gering zu hal­ten. Daher ist die star­ke Kompression des neu­en Webfont-Formats Grund genug, auf WOFF 2.0 umzu­stei­gen. Dank ent­spre­chen­der 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 feh­ler­haft. Chrome wür­de in dem Fall das woff-Format ein­bin­den, da es noch vor dem woff2 defi­niert ist.

    “Es kommt auf die Reihenfolge an, in der die Schriftvarianten ange­ge­ben wer­den. Der Browser wählt das ers­te unter­stütz­te Format aus. Wenn Sie also wün­schen, dass die neue­ren Browser WOFF2 ver­wen­den, ist die WOFF2-Deklaration vor WOFF anzu­ord­nen und so wei­ter.”
    Abschnitt “Schriftartfamilie mit @font-face defi­nie­ren” https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=de

  2. WOFF 1.0 is based on defla­te (gzip), not LZMA. LZMA was con­si­de­red for WOFF 2.0, but aban­do­ned par­ty for its slow deco­ding speed.

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

Schreibe einen Kommentar zu Jyrki Alakuijala Antworten abbrechen

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