Als webontwikkelaars waren wij altijd vrij beperkt in het gebruik van lettertypes op een website. Tegenwoordig zijn er echter gelukkig genoeg oplossingen om wel andere lettertypes te kunnen gebruiken.
In het artikel over de toekomst van webfonts heb ik hier al uitgebreid over geschreven. Met de komst van WOFF zet deze trend zich voort.
Wat is WOFF?
WOFF is een font formaat speciaal ontwikkeld voor het web. WOFF is onlangs door het W3C gelanceerd en staat voor Web Open Font Format. Het W3C verwacht dat WOFF binnen korte tijd door alle browsers ondersteund zal worden. Beter gezegd, WOFF wordt de webstandaard voor fonts.
Firefox ondersteunt WOFF al vanaf versie 3.6. De nieuwe versies van Chrome en Opera ondersteunen inmiddels ook dit nieuwe font formaat. En nog meer goed nieuws, zelfs de nieuwe browser van Microsoft, IE9 ondersteund WOFF.
Een WOFF font bestand is kort gezegd een gecomprimeerde versie van de welbekende TrueType (van Apple), OpenType of Open Format fonts. Het WOFF formaat maakt gebruik van zlib compressie waardoor de bestandsgrootte met maar liefst 40% kan worden teruggebracht.
Een WOFF font kan daarnaast optionele metadata bevatten met informatie over de maker van het font en regels met betrekking tot het gebruik ervan. Deze informatie kan bijvoorbeeld worden gebruikt om te achterhalen waar een font vandaan komt. De meeste fonts mag je immers niet zomaar gebruiken.
Hoe werkt WOFF?
WOFF werkt in principe vrij eenvoudig. Met @font-face kon je al linken naar TrueType en OpenType fonts. Nu heb je ook de mogelijkheid om naar WOFF fonts te linken.
Met de font generator van Font Squirrel kan je eenvoudig een TrueType of OpenType font naar het WOFF formaat transformeren. Vervolgens kan je het font met @font-face inladen. Dat werkt als volgt:
@font-face {
font-family: ChunkFive;
font-weight: normal;
src: url(fonts/ChunkFive.woff) format("woff"),
url(fonts/ChunkFive.ttf) format("truetype");
}
De browser download het gecomprimeerde bestand, pakt het uit waarna het vervolgens gebruikt kan worden. In dit voorbeeld zullen browsers die @font-face ondersteunen maar WOFF nog niet het TrueType font gebruiken. Op een voorbeeld pagina op de website van Firefox staat een mooi voorbeeld van de werking van WOFF. Zorg er wel voor dat je een nieuwe browser hebt, anders zal de functionaliteit niet werken.
Ik ben erg enthousiast over de ontwikkelingen omtrent webfonts en hoop snel @font-face en WOFF grootschalig in onze projecten toe te passen. Vragen over WOFF of andere interessante webontwikkelingen? Laat even een reactie achter.
3 reacties
Waar zit de winst van WOFF hem in ten opzichte van andere lettertype extensies? Dat het font 40% in bestandsgrootte vermindert en dat je meta-date kan toevoegen? Of zijn er nog meer voordelen?
Dat IE9 dit ondersteunt hangt toch af van de ondersteuning van @font-face en niet van WOFF?
Zelf denk ik dat er veel potentie zit in Google Font Directory. Als de lijst van beschikbare fonts hierbij makkelijk uit te breiden valt zal dit ook een zeer simpele oplossing zijn om je fonts cross-browser toe te passen, ook in oudere versie van IE https://fonts.google.com/.
Groet,
Rudolf
Rudolf, bedankt voor je reactie.
De winst van WOFF zit hem inderdaad in de reductie van de bestandsgroottte en de toevoeging van meta-data. De bestandsgrootte is erg belangrijk aangezien een lange laadtijd kan resulteren in een slechte user experience (je krijgt de gerenderde tekst pas te zien als het nieuwe font geladen is). De metadata is vooral bedoeld voor informatie betreffende copyrights. Veel fontmakers willen wel licenties geven voor WOFF fonts. Daarnaast is het altijd goed om een universele standaard voor webfonts te hebben zodat de browsers de fonts ook op dezelfde manier kunnen renderen (hoe het font op het scherm getoond wordt).
Als een browser @font-face ondersteunt wil het nog niet zeggen dat het ook WOFF ondersteunt. Browsers moeten ondersteuning bieden voor @font-face en voor WOFF. Gelukkig doet IE9 dat.
Goed dat je Google Font Directory noemt. Dat is namelijk ook een erg mooie oplossing voor het gebruik van andere lettertypes. Het is vooral ook erg gemakkelijk in gebruik. Helaas zijn er nu alleen nog erg weinig fonts beschikbaar. FontSquirrel biedt bijvoorbeeld al veel meer fonts aan die gebruikt kunnen worden i.c.m. WOFF. FontShop heeft ook al commerciële fonts in het WOFF formaat beschikbaar gestelt. Google Font Directory zal zoals het nu lijkt alleen open source fonts beschikbaar stellen.
Dit is overigens ook nog een interessant artikel over het gebruik van fonts op het web:
https://alistapart.com/article/fonts-at-the-crossing