@font-face - embed fonts in websites

Typografie is één van de pijlers van een brand (identiteit). Het huisstijl lettertype bevind zich op hetzelfde niveau als het logo, beeldelementen en het kleurenpallet. De website is het belangrijkste raakpunt van de brand met de doelgroep en nu kan eindelijk ook de tekst op de website deel uitmaken van de visuele uitingen van de brand.

De web-safe fonts zijn speciaal voor de weergave op het beeldscherm ontworpen. In offline uitingen (printen, drukken) bieden ze niet voldoende detail en individualiteit voor het gebruik in corporate huisstijlen. Voor de grotere bedrijven, die vaak custom- of gemodificeerde fonts gebruiken, was dit een altijd een moeilijk te overwinnen barrière.



Tot voor kort konden voor het ontwerpen van websites alleen web-safe fonts gebruikt worden. Dit zijn fonts die standaard op de computer van de website bezoeker geïnstalleerd (Verdana, Helvetica, Georgia, etc.) zijn en daarmee in alle internet browsers hetzelfde weergegeven worden.

Met Firefox 3.0 introduceerde Mozilla ondersteuning voor kerning, ligaturen en het gebruik van meerdere gewichten voor de rendering van complexe scripts. Firefox 3.5 daarintegen gaat nog een stap verder en omarmt de nieuwe '@font-face' technologie. Safari (met WebKit) ondersteunt deze technologie sinds versie 3.1 en Opera wil deze vanaf versie 10 gaan ondersteunen.
De tijd voor creatieve, genuanceerde en volwassen typografie is eindelijk aangebroken.

Beperkingen tot nu toe

Verfijnde typografie is altijd het struikelblok voor web design geweest. Tot voor kort waren web designers beperkt tot het gebruik van een handvol standaard systeemfonts, de zogenaamde web-safe fonts. Als je meer details of creativiteit in je typografie wilde brengen, moest je je in de technische uithoeken van het internet begeven. Daar bevinden zich technologieën als sIFR en Cufón, die Flash en Javascript gebruiken om gevarieerde typografie te realiseren. Helaas gaat dit vaak gepaard met een slordige technische implementatie waardoor het online klungelig werkt.

Nieuwe web-standaard

@font-face brengt is de hoop voor een nieuwe webtechnologie-standaard die cross-platform, cross-browser, lichtgewicht en efficiënt is. Met andere woorden; het geeft web designers de mogelijkheid om OpenType en TrueType fonts op hun server te installeren en die met CSS (Cascading Style Sheets) aan te roepen. Hiermee worden ze op elke computer, onder elk systeem en op elke internet browser hetzelfde weergegeven, onafhankelijk van het feit of deze fonts op de computer van de bezoeker geïnstalleerd zijn.

Fundamentele typografische eigenschappen

De web-technologie is een afspiegeling van de klassieke (offline) technieken. Daar wordt typografie als een kunstvorm gezien en alleen de geoefende typograaf of vormgever weet het goed toe te passen.
Hier is een lijst met enkele fundamentele online eigenschappen die de basis vormen voor goede webtypografie:

• text-decoration (overline / underline)
• font-size
• font-variant (small-caps)
• text-transform (uppercase / lowercase)
• letter-spacing
• font-weight

CSS Pseudo Elements:

• :first-line
• :first-letter

Door deze eigenschappen slim en doeltreffend in te zetten kun je als vormgever de offline (drukwerk) en online (website) huisstijl consistent houden, wat voor de brand van onschatbare waarde is.

Hoe herken ik @font-face?

Het gebruik van de @font-face codering is relatief eenvoudig. Wie enige kennis heeft van CSS stylesheets zal met de implementatie in een website weinig problemen hebben.
Binnen een CSS style sheet definieert elke @font-face regel een font familie die gebruikt moet worden, de font software die geladen moet worden en het gewicht (bold, italic, etc.). Een CSS stylesheet kan vele verschillende fonts bevatten, hoewel er maar enkele effectief gebruikt worden. Dit heeft geen nadelig effect op de performance van de website.

Hier een voorbeeld van een @font-face CSS codering:

----------
/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format("opentype");
}
body {font-family: Graublau Sans Web, Lucida Grande, sans-serif;}
----------

Browsers die @font-face ondersteunen renderen de tekst met het font GrauBlau Sans Web dan als volgt:

Fontspring kwam in februari 2011 met een aangepaste @font-face syntax. Hij noemt dit de 'bulletproof @font-face syntax'. Het probleem was dat de normale syntax niet in alle browsers, vooral in Android, even goed werkte. Hij kwam met deze oplossing:

----------

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

----------
Zijn @font-face syntax is compatible met Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3 en Opera 11.

Browsers die de nieuwe functionaliteit niet ondersteunen nemen ofwel Lucida Sans of het standaard sans-serif font dat in de browser voorkeuren van de gebruiker ingesteld is.

Web service websites

Er zijn een paar slimme aanbieders die webfonts op een grotere schaal aanbieden, zoals TypeKit, FontDeck en Kernest. Bij deze aanbieders neem je een abonnement waarmee je dan de beschikbare fonts binnen je pakket voor een maximaal aantal websites onbeperkt kunt gebruiken. Op die manier hoef je niet elk font te kopen en op je server te installeren, je huurt het feitelijk van ze. De bandbreedte belasting ligt bij deze online aanbieders, waardoor de belasting op je eigen website laag blijft.
Dit is een kleine revolutie in de wereld van de font foundries, want normaal gesproken koop je een font en verkrijg je daarmee het gebruiksrecht.

Browser compatibiliteit

Welke browsers zijn geschikt voor het gebruik van de @font-face code?

Hoe zit het met de rechten?

Het probleem dat font foundries momenteel nog met @font-face hebben is dat het de (raw) font software (.otf en .ttf) blootstelt zodat iedereen die kan downloaden (ofwel stelen). En met 'raw' is het basis bestand bedoeld dat je direct op je computer kunt installeren en gebruiken. Het downloaden van een font is daarmee net zo gemakkelijk geworden als het downloaden van een afbeelding.
Momenteel is er nog niet voldoende auteursrechtelijke bescherming voor de manier waarop @font-face werkt. Er zijn momenteel nog maar twee opties voor de font foundries;

1. ze moeten de designer vertrouwen dat die voor hun fonts betaald, ook als die openlijk toegankelijk zijn, of
2. ze moeten wachten totdat er een wet komt die hun fonts beschermt.
   

Firefox 3.5 laat standaard alleen toe dat fonts geladen worden die zich op dezelfde server als de website bevinden. Dit voorkomt dat andere websites vrij van deze fonts gebruik kunnen maken.
Internet Explorer herkent alleen font families en 'src descriptors' binnen de @font-face regel. Dat betekent dat iedere font familie maar één font mag bevatten. Momenteel ondersteunen ze de 'format ()' hints nog niet, maar daar wordt aan gewerkt. Als je de @font-face functionaliteit voor Internet Explorer toch wilt gebruiken moet je de fonts converteren naar het EOT (Embedded OpenType) font formaat. Hiervoor is een speciale software ontwikkeld, genaamd Microsoft WEFT Tool, maar die is natuurlijk alleen voor Windows gebruikers beschikbaar.

Web designers verlangen naar een elegante oplossing zodat ze kunnen beginnen met het breed uitrollen van @font-face toepassingen zonder dat ze het gevaar lopen een EULA (End User Licence Agreement) te breken. Voor kleine font foundries is dit een enorme kans. Hiervoor moeten ze wel de professionele gebruiker vertrouwen en hun EULA zodanig aanpassen dat die aan de huidige wensen voldoet. Het illegale gebruik van lettertypes zal altijd een probleem blijven, maar font foundries die nu een eenvoudige strategie ontwikkelen voor het online font gebruik zullen een enorm voordeel ten opzichte van hun concurrenten hebben.

Andere web fonts embedding technieken

De @font-face techniek is niet de enige ontwikkeling op het gebied van webfonts embedding die in de race is de nieuwe web-standaard te worden. Momenteel lopen er nog drie ontwikkelingen parallel aan de @font-face ontwikkeling die interessant genoeg zijn om hier kort te bespreken:

EOT (Embedded OpenType Format)
In 1997 ontwikkelde Microsoft EOT, een compacte versie van OpenType die embedding in Internet Explorer toeliet. In 2007 gaven ze deze techniek vrij, boden het aan aan W3C (zodat het in CSS3 opgenomen zou kunnen worden) en hoopten op een wereldwijde acceptatie. Later dat jaar werd het voorstel afgewezen uit veiligheidsoverweging. In 2008 werd EOT opnieuw aan W3C aangeboden.

.webfont
Onlangs hebben twee getalenteerde font designers (én programmeurs), Tal Leming en Erik van Blokland, een alternatief voorgesteld; het .webfont formaat.
Dit formaat is niet publiek vrijgegeven en is ook geen open source. De makers houden de copyright controle over het formaat en kunnen beslissen wat de gebruiker wel en niet mag doen. Of het formaat officieel vrijgegeven zal worden zal de toekomst uit moeten wijzen.
.webfont (dotwebfont) is een gecomprimeerd bestand (waarschijnlijk .zip) dat twee files bevat; de feitelijke font data, en een 'info.xml' file. De ingesloten rechten of meta data worden door ondersteunende browsers gelezen, waarmee bepaald wordt of het font gedownload en weergegeven mag worden.

Permissions Table for OpenType
PERM is een voorstel van David Berlow van The Font Bureau. Om een lang verhaal kort te maken; dit voorstel plaatst meta data in de OpenType font file. Dit is informatie over de rechten waarmee het font gelicenceerd is en op welke website het weergegeven mag worden.
Het grote voordeel van PERM is tegelijkertijd ook het nadeel; de xml structuur waarin de rechten beschreven staan. Hoe kan voorkomen worden dat misbruikers de font files openen en de rechten bewerken?

Wie beslist hierover?

Wanneer wordt een nieuwe web-standaard geaccepteerd en wie beslist daarover? In tegenstelling tot wat velen denken beslist niet W3C of een nieuwe web-standaard aangenomen wordt, maar de community; de font foundries, de font ontwerpers en de distributeurs, ofwel de mensen die ermee moeten werken. Als zij de nieuwe ontwikkelingen ondersteunen én de makers van internet browser (Firefox, Safari, Internet Explorer, Opera, Google Chrome, etc.) ondersteuning inbouwen, eerst dan zal W3C serieus overwegen het web-standaard in het nieuwe CSS protocol op te nemen.

Enkele voorbeelden

Hier een paar websites die de @font-face techniek heel mooi gebruiken:
I Love Typography
For a beautiful web
Nice Web Type
Craigmod
Tap tap tap
P2 Theme

Meer weten?

Wil je meer weten over het gebruik van de @font-face toepassing, neem dan contact met ons op.

Externe links

Dotwebfont.com
Dotwebfont.nl
Fontface.nl