You may want to put some text here

Het einde van Cufon en sIFR, welkom font-face

De meeste webontwikkelaars zullen al wel eens gebruik gemaakt hebben van Cufon of sIFR om niet web-safe fonts te gebruiken in een website. Het nadeel van deze techniek is dat je er Javascript voor nodig hebt en wat betreft implementatie, was het ook niet echt altijd handig.

Maar nu kunnen we deze technieken achter ons laten en gebruik gaan maken van CSS font-face. Hiermee kan je fonts rechstreeks in je CSS laden en deze gebruiken om je HTML pagina’s naar een hoger niveau te tillen.

Font-face is echter totaal niets nieuws. De eerste versie van font-face was al aanwezig in IE5, die maar liefst 11 jaar geleden gelanceerd is. Dan is natuurlijk de vraag: waarom er pas na al die jaren nu gebruik van gemaakt kan worden? Dit komt doordat er andere browsers zoals Firefox dit nog niet zo lang ondersteunen. Firefox heeft dit altijd een beetje afgehouden vanwegen gevaar voor copyright schendingen van de lettertypes. Niet alle lettertypes mogen namelijk zomaar op websites gebruikt worden.

Om dit probleem op te lossen is Mozilla gestart met WOFF of Web Open Font Format. Het is een gecompreste versie van een normaal ttf of otf font maar als extraatje zit er ook informatie in over vanwaar het font komt, een soort licensie zeg maar.

Door het starten van WOFF is font-face nu ook beschikbaar in Firefox. Je moet momenteel wel voor verschillende browsers, verschillende formate van fonts voorzien, maar dit kan je oplossen met de Font Squirrel font-face generator. Dit tooltje zet een ttf of otf font om naar de benodige lettertypeformaten en genereerd hier een zipje van met de benodigde bestanden, inclusief de CSS stylesheet die je moet invoegen in je HTML.

Welke browsers

Hieronder krijg je een overzicht van welke browsers welke formaten ondersteunen en vanaf welke versie.

Browser Vanaf versie Formaten
Safari/Webkit 3.1 ttf, oft, svg (iPhone en iPad gebruiken SVG)
Opera 10 (Mobile 9.7) ttf, otf, svg
Internet Explorer 5 eot, (woff vanaf IE9)
Chrome 4 ttf, otf, (woff vanaf 6)
Firefox 3.5 ttf, otf, (woff vanaf 3.6)
Netscape 4 pfr

Code voorbeeld

Hieronder zie je een voorbeeldje van hoe zo’n font-face in CSS gebruikt wordt:

@font-face {
	font-family: 'lettertype naam';
	src: url('lettertype_naam.eot');
	src: local('☺'), url('lettertype_naam.woff') format('woff'), url('lettertype_naam.ttf') format('truetype'), url('lettertype_naam.svg#webfontWmM9YNOd') format('svg');
	font-weight: normal;
	font-style: normal;
}

De reden waarom die local(‘☺’) gebruikt wordt, is omdat IE enkel het eot formaat nodig heeft. Door het gebruik van die smiley zal IE niet verder gaan met het uitvoeren van die code. Anders zou IE al de andere formaten ook downloaden zonder dat deze gebruik worden. Als tweede reden is er dat IE vastloop op sommige van die andere formaten.

Voor meer informatie hierover kan je eens een kijkje nemen op Paul Irish zijn blog.

Render voorbeelden

Ik heb eens wat tests gedaan in verschillende browser voor te zien hoe goed de lettertypes gerenderd werden. Hieronder zie je het resultaat.

Font-face rendering in Internet Explorer 6

Font-face rendering in Internet Explorer 7

Font-face rendering in Internet Explorer 8

Font-face rendering in Internet Explorer 9

Font-face rendering in Safari 5

Font-face rendering in Opera 10.62

Font-face rendering in Firefox 3.6.10

Font-face rendering in Chrome 6

Tot slot

Font-face heeft het web weer een niveau hoger gebracht. Laten we alleen hopen dat we nu de volgende jaren geen speeltuin van lettertypes op het internet gaan zien, maar dat hier wijs mee omgesprongen gaat worden. Gebruik font-face niet omdat het cool is of omdat je het wilt gebruiken, maar om je design beter te maken.

Enkele handige links

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

2 Responses »

  1. Interessant artikel, laten we hopen dat font-face snel gebruikt kan worden in alle browsers.

Leave a Comment