@font-face niet alleen rozengeur

Aangezien er veel positieve verhalen geschreven worden over de @font-face techniek, wil ik even melden dat het niet alleen rozengeur en maneschijn is. De @font-face techniek maakt het voor webdesigners mogelijk om op eenvoudige wijze lettertypes te gebruiken die van oorsprong niet als “web safe” worden gekenmerkt, maar kent (niet geheel onverwachte) haken en ogen.

Aangezien (de beperkte mogelijkheden van) typografie op het web altijd een veelbesproken onderwerp is, kijkt een groot deel van de community al jaren reikhalzend uit naar een oplossing om op een flexibele wijze nieuwe lettertypes toe te voegen aan een site. Alle moderne browsers (mobile browsers als Mobile Safari uitgezonderd) ondersteunen inmiddels @font-face en er zijn ook al enkele professionele sites (zoals Typekit) waar je als webdesigner voor weinig toegang krijgt tot een hele set van Real Fonts. Het gaat dus de goede kant uit. Echter, een probleem waar je tijdens de ontwikkeling tegenaan loopt is dat de fonts in verschillende browsers en op verschillende OS-en anders gerenderd worden.

Met name Internet Explorer lijkt moeite te hebben met de anti-aliasing van de lettertypes. We kwamen hier achter bij het testen van een lettertype via Typekit op een site van een klant. Hieronder een voorbeeld van de het resultaat in twee verschillende browsers:

@font-face rendering in Firefox
(Mac OSX)

@font-face rendering in Internet Explorer 8
(Windows 7)

Het mag duidelijk zijn dat het resultaat in Internet Explorer onacceptabel is. Speciaal om dit soort problemen vooraf te ondervangen heeft Typekit de mogelijkheid om per lettertype “Browser Samples” te bekijken. In de praktijk betekent dit dat je als ontwerper al tijdens de ontwerpfase moet uitzoeken of een bepaald lettertype ook geschikt is voor @font-face. Wel belooft Typekit verbetering, aangezien de fonts regelmatig worden bijgewerkt door de foundry partners. Als Microsoft aan de andere kant nu ook nog even de rendering in IE onder handen neemt, dan wordt @font-face wellicht het succes van dit decennium.