Inleiding

In mijn laatste artikel over lettertypes op het web kwam ik tot de conclusie dat het tijd is om rustig aan te beginnen met het implementeren van web fonts. Even recapitulerend:

Web fonts

• Is een technologie die de designer en ontwikkelaar in staat stelt om in een css-bestand te verwijzen naar op een webserver toegankelijke fonts (.ttf, .otf of – in het geval van IE – .eot)
• Is een technologie die technieken als FIR, sIFR, FLIR, Cufon en Typeface.js overbodig zou kunnen maken: geen plugins nodig, geen scripting, geen problemen op het gebied van accessibility, usability en performance. Het werkt even goed voor koppen als voor bodytekst. Het is in feite systeemtekst en niet een afbeelding, svg of swf.
• Is onderdeel van de css3 working draft
• Wordt al ondersteund door een aantal populaire browsers (IE6/7/8, Safari 3/4 en binnenkort Opera 10 en Firefox 3.1)

Klinkt allemaal fantastisch natuurlijk. Waar wachten we op? Implementeren die handel!

Licenties

Fonts zijn geen documenten, maar software en kunnen daarom voorzien zijn van een gebruikerslicentie die de eigenaar verbied de software te delen op het internet. Dus als we het eerlijk willen doen moeten we bij het implementeren van webfonts er op letten of de EULA van een font het wel toelaat. Om je gelijk uit je dromen te helpen: bij nagenoeg alle commerciele fonts is dat niet het geval. Wat blijft er dan over?

Gratis fonts

Er zijn veel, heel veel gratis fonts te vinden op het internet. Heel veel lelijke, maar ook een paar hele mooie. Designers hebben dus ruim de keus als het gaat om gratis fonts. De winnaars van onze Boekenbingo kunnen dat beamen.

Let echter goed op bij het selecteren van een gratis font. Ascender Corporation heeft een onderzoek gedaan naar de kwaliteit van gratis/shareware fonts. Daarbij werden de fonts onderworpen aan een aantal testen (compleetheid, hinting, embedding restriction etcetera). Daaruit bleek dat aan 95,9% van de 4385 fonts wel iets mankeerde. Dat wil niet zeggen dat de fonts onbruikbaar zijn, wees er echter op voorbereid dat bijvoorbeeld bepaalde characters niet beschikbaar kunnen zijn binnen een font.

Tot slot zijn er, zoals ik al eerder melde, heel veel lelijke fonts die je eigenlijk als smaakvolle designer niet zou willen gebruiken. Sommige mensen vrezen met de opkomst van webfonts een nieuw tijdperk aanbreekt, in de geest van het tijdperk van animerende gifs, “blink”-tekst en marquees. Kun je je dat nog herinneren? Dat was lang geleden, ergens einde 20ste eeuw. Affijn, dat hou je toch niet tegen. Ik denk dat designers dankzij techniek zich nog beter kunnen onderscheiden van de amateurs. Goeie designers zijn gelukkig gezegend met een oog voor kwalitatief goede gratis fonts.

Embedden

Leuk en aardig die gratis fonts, zul je denken. Maar wat als de styleguide van mijn klant een dure Futura of Bembo voorschrijft? Doodleuk het font op een server zetten om er aan te kunnen refereren binnen CSS zou een licentiebreuk en dus piraterij zijn.

Internet Explorer ondersteunt als enige browser sinds versie 4 het door Microsoft zelf ontwikkelde .eot (Embedded Open Type) formaat. Met de gratis tool WEFT (Web Embedding Fonts Tool) kan de auteur TrueType fonts converteren naar .eot bestanden. Dit bestandsformaat gebruikt DRM dat er voor zorgt dat een font verbonden is aan een webdocument, en dus niet buiten dit document gebruikt kan worden. Het font word in feite niet zomaar gelinked aan een document, maar juist “ge-embed”. Het goede nieuws is dus dat veel commerciele fonts gewoon ge-embed kunnen worden (maar check die licenties voordat je het doet!). Het slechte nieuws is dat het op dit moment alleen zal werken in Internet Explorer. Inmiddels heeft Microsoft .eot bij W3C aangedragen als webstandaard.

Webfonts.info heeft een erg compleet overzicht van gratis fonts die je mag embedden, en een lijst van commerciële typefoundries die font-embedding toestaan.

Linken

Hoewel W3C een duidelijke voorkeur lijkt te uiten voor font embedden ten opzichte van font linken, is er veel weerstand van partijen zoals Mozilla, Apple en Opera. Het web moet volgens hen open blijven: het gebruik van .eot vereist dat je telkens fonts moet converteren met een applicatie (WEFT), een onnodig extra stap die het tijdrovend maakt. Er zijn al een aantal suggesties gedaan hoe misbruik van fonts kan worden tegengehouden op een meer open, praktischere manier.

Maar hoe dan ook, terwijl de discussies doorgaan is er al wel een manier waarop we in ieder geval cross-browser gebruik kunnen maken van gratis fonts als webfonts. En daar ligt de focus van de rest van dit artikel.

Webfonts in de praktijk

Die goede ouwe tijd dat we Internet Explorer en Netscape verschillende css en JS moesten voeren lijkt weer aangebroken:

• Internet Explorer slikt alleen .EOT bestanden
• Safari en straks Mozilla en Opera enkel .TTF en .OTF

Om dit goed te doen moeten we dus dubbel werk doen. Om je een idee te geven van hoe webfonts in de praktijk gebruikt kunnen worden volgt hieronder een stap voor stap tutorial.

De benodigdheden:

• Een computer met Windows XP geinstalleerd (onder Vista werkt WEFT erg onstabiel)
• WEFT
• Internet Explorer
• Safari 3.1 of nieuwer, of Firefox 3.1beta, of Opera 10 Alpha.
• Een editor voor je (x)html en CSS
• Een webserver
• Een FTP-client
• Een beetje geduld

Stap 1: kies een font

Voor dit voorbeeld gebruik ik een absurd lettertype: Chinese Calligraphy. Het gaat even om het idee! Bij het bekijken van het uiteindelijke resultaat zie je tenminste in een oogopslag of het werkt of niet.

Download en installeer dit font, maar zet ook een kopie ervan in de map waarin je ook je HTML-bestand wil zal plaatsen.

Stap 2: maak een webpagina

Maak een HTML bestand met wat vultekst en plaats die in de map waar je ook de fonts hebt neergezet. Voor dit voorbeeld maak ik gebruik van de volgende HTML-code.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<!-- @font-face { font-family: "Chinese Calligraphy"; src: url(Chinese%20Calligraphy.ttf); } body { font-family: "Chinese Calligraphy"; } -->
<h1>Web fonts</h1>
Lorem ipsum dolor sit amet, <a href="&lt;a href=">consectetur"&gt;http://www.heeftstijl.nl"&gt;consectetur</a> adipiscing elit. Nam sollicitudin. Nam suscipit lectus at purus faucibus tempor.

Upload het HTML-bestand en de font naar je webserver en bewonder het resultaat in Safari of Firefox 3.1b. Nu Internet Explorer nog…

Stap 3: converteer het font in WEFT

• Start nu WEFT. De applicatie zal opmerken dat er een nieuw font is geinstalleerd. Kies “Yes” om ze toe te voegen aan de database.
• Vervolgens vraagt de applicatie wat het http-adres is van de webpagina waarop een font word gebruikt dat je wil converteren naar .eot. Voer het adres van je webserver in en klik op “Next”.
• Kies bij “Enter the location here the font objects will be created” voor “File://” en verwijs naar de map op je harde schijf. Klik op “Next”.
• In het volgende scherm, vink “Do not upload modified pages to my server” aan.
• Klaar! Upload nu ook het bestand dat je net hebt aangemaakt, die “CHINESE0.eot” zou moeten heten.

Stap 4: voeg CSS toe voor Internet Explorer

En wel als volgt:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<!-- @font-face { font-family: "Chinese Calligraphy"; src: url(Chinese%20Calligraphy.ttf); } @font-face { font-family: Chinese Calligraphy IE; font-style: normal; font-weight: normal; src: url(CHINESE0.eot); } body { font-family: "Chinese Calligraphy", "Chinese Calligraphy IE"; } -->
<h1>Web fonts</h1>
Lorem ipsum dolor sit amet, <a href="&lt;a href=">consectetur"&gt;http://www.heeftstijl.nl"&gt;consectetur</a> adipiscing elit. Nam sollicitudin. Nam suscipit lectus at purus faucibus tempor.

Stap 5: bewonder het resultaat

Maar ditmaal ook in Internet Explorer. Hier is een werkend voorbeeld te zien.

Opmerking

In dit voorbeeld gebruikte ik een .ttf. Aangzien WEFT enkel met .ttf overweg kan is het dus nodig om in het geval van .otf eerst het font te converten. Dat kan met applicaties als TransType of het open source FontForge.

Conclusie

Support voor web fonts begint nu eindelijk te komen, al is het nog niet gestandaardiseerd. Met wat moeite kan het zelfs cross browser geimplementeerd worden. Perfect en praktisch is het nog niet. Het implementeren kan een tijdrovende klus zijn. Early adopters zullen waarschijnlijk dan bloggers en designers zijn die hun site of portfolio een uniekere identiteit willen geven dankzij typografie. Hoe de toekomst er uit ziet na het standaardiseren van web fonts (embedden of linken?) is nog niet duidelijk. Wel is er op dit moment een wereld open gegaan voor ontwerpers: niet langer zijn zij beperkt tot een handjevol standaard fonts.

Update 8 september 2009

Noemenswaardig is Typekit, een nieuwe manier van fonts gebruiken op een webpagina. De technologie achter Typekit maakt gebruik van web fonts. Het werkt snel, makkelijk en de aangeboden fonts zijn van een hoge kwaliteit. Lees er meer over op hun blog.

Update 1 november 2009

Firefox heeft vanaf versie 3.6 ondersteuning voor WOFF. Hat tip to  Jeroen van der Tuin!

Verder surfen:

• @font-face generator
• 40 excellent free fonts
• Exljbris: free quality font foundry
• Hans Lijklema (auteur Free Font Index 01)
• ubiquitous web font embedding just got a step closer
• better than free
• for and against standardising font embedding
• webfonts.info