De revolutie van webfonts door Typekit
Door 25/11/2009 | Comments (1)
Het fontgebruik op websites is al jaren beperkt tot een aantal fonts. Deze fonts voldoen aan de eis dat ze te vinden zijn op de computers van de meeste internetgebruikers. Voor webdesigners is dat een beperking waarmee we hebben leren leven. Maar daar lijkt verandering in te komen doordat een Typekit een fontserver heeft ontwikkeld die veel problemen oplost.
sIFR
Er zijn wel alternatieven om via een workaround andere fonts te gebruiken dan de standaard set van gebruikelijke webfonts. sIFR is daarvan waarschijnlijk de bekendste, hierbij wordt met behulp van Javascript de tekst op de pagina vervangen door een flashobject met dezelfde tekst. Dit heeft echter wel een aantal nadelen: de laadtijd van de pagina wordt langer, tevens gaat het gerucht dat het gebruik van de sIFR slecht is voor de SEO van je website.
@FontFace
De aankondiging van het gebruik van custom fonts via CSS was een stap in de goede richting. Bij deze declaratie wordt het custom font geladen als de gebruiker op de pagina terecht komt. Een nadeel hiervan was dat font-ontwerper bang waren dat hun, met veel bloed zweet en tranen ontworpen fonts, te grabbel werden gegooid, doordat ze vrij te downloaden waren. Totdat een aantal grote fontbureau’s op de Typo09 conferentie in Mexico bedachten dat het licentiemodel anders moest worden: een fontserver die via Javascript de fonts in een website plaatst. Font-ontwerpers blij, webdesigners blij, webdevelopers weet ik nog net niet (ik heb de performance nog niet goed bekeken).
Demo
Natuurlijk heb ik even een test aangemaakt voor Mindblog:
Dit is een fonttest met het font Moby, dat ziet er best goed uit.
Browsercompatibility
De bovenstaande test is te zien op browsers die CSS @font-face technologie ondersteunen. In Chrome werkt het zo te zien niet, maar in IE8 en Firefox 3.0 wel. Hier zal de komende tijd wel hard aan gewerkt worden om dit te verbeteren.
Korte handleiding voor het gebruik van Typekit
- meld je aan bij Typekit voor een gratis Trail versie (5GB maandelijkse bandbreedte, 1 website, 2 fonts)
- plaats de Embed Code in de head van je pagina (rechtsbovenin)
- selecteer de fonts die je wil gebruiken, klik op Publish rechtsonderin (anders werken de font niet)
- gebruik de selector (deze wordt vermeld bij het font) voor het opmaken van de tekst, voor bovenstaand voorbeeld: class=”tk-moby”
Bij het gebruik van Typekit worden de fonts die je geselecteerd hebt voor gebruik gedownload van de server typekit server. De meeste fontsets in Typekit zijn nog vrij zwaar, de Moby (what’s in the name) is nog licht met 49K.
Natuurlijk zijn er ook al weer 2 plugins voor WordPress te vinden, de best vind ik ‘Typekit for WordPress‘
Nu maar kijken of deze technologie doorbreekt, het zou web-typografie zeker goed doen!
(Met dank aan Martijn Voerman van Define Design voor de tip)
Gerelateerde blogposts:
Tags: fonts, Typekit, Wordpress
sIFR is niet slecht voor je SEO (heeft immers een replacement, want is gelaagd gebouwd en dus semantisch) maar heeft wel andere problemen.
Typekit ziet er clean uit :) kan zo alles valid en semantisch bouwen, geen inline js en css (als je de embed in je js-library opneemt). like it!