Web fonts

31 maart 2009 om 11:00

Inleiding

webfonts

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

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:

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:

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.

Web fonts

Lorem ipsum dolor sit amet, consectetur”>http://www.heeftstijl.nl”>consectetur 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

Stap 4: voeg CSS toe voor Internet Explorer

En wel als volgt:

Web fonts

Lorem ipsum dolor sit amet, consectetur”>http://www.heeftstijl.nl”>consectetur 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!

Update 20 oktober 2010

En al sinds enige tijd is bekend dat ook IE9 ondersteuning heeft voor WOFF. Het ziet er naar uit dat Webfonts de komende tijd een steeds algemener fenomeen zal worden. Hoera!

Verder surfen:

Over de auteur

Carsten Altena
Carsten Altena is een grafisch ontwerper met een affiniteit voor clean, lean, user-centered en toegankelijk webdesign. Naast grafisch ontwerp heeft hij ook veel ervaring als front-end developer, en was hij een van de eersten in Nederland die webstandaarden zoals XHTML en CSS omarmden. http://www.carstenaltena.nl/creeert/