Het valt de meeste bezoekers niet direct op, maar het kan wel degelijk een verschil maken voor de uitstraling van een website; de gebruikte lettertype’s. Het is bij veel webdesigners een gewoonte om lettertype’s in een ontwerp te gebruiken welke niet direct standaard lettertypes zijn, en die de meeste bezoekers niet op hun PC geïnstalleerd hebben. En als een bezoeker het gekozen lettertype niet heeft geïnstalleerd, zal hij of zij de site niet zien hoe deze bedoelt is.

Nu gebruikten we door de jaren heen verschillende manieren om het toch mogelijk te maken om lettertypes te gebruiken die niet standaard op een gemiddelde PC geïnstalleerd zijn.

De oermanier

De oer-manier om een afwijkend lettertype te gebruiken, is om op alle plekken waar tekst staat die in het eigen lettertype getoond moet worden maar gewoon plaatjes te gebruiken in plaats van tekst. Doe dit niet! De tekst in de afbeeldingen wordt namelijk niet gezien als inhoud van de website. Alle belangrijke informatie in kopteksten die als plaatje wordt weergegeven zal niet geïndexeerd worden door Google.

sIFR

Een van de eerste alternatieve en een veel gebruikte manier is sIFR. Hierbij wordt het lettertype opgeslagen in een Flash video, en wordt er na het laden van de website alle tekst waarvoor dit aangegeven is vervangen door de letters die in de Flash video staan. Erg optimaal bleek deze manier niet te zijn, want Flash kan niet geïnstalleerd of uitgeschakeld zijn. Ook kan de website bij veel te vervangen tekst erg langzaam worden, en zien bezoekers met een iPhone of iPad ook niet het lettertype wat je ze wilt laten zien.

Cufon

Een meer recentere methode die wij bij Artform ook nog lang hebben gebruikt is Cufon, welke op een soortgelijke manier werkt als sIFR. In plaats van het lettertype op te slaan in een Flash video, wordt het lettertype opgeslagen in een javascript bestand. Voordelen ten opzichte van sIFR zijn dat het wel werkt op mobiele apparaten, en javascript standaard wordt ondersteund en niet apart geïnstalleerd hoeft te worden.

De beste oplossing: @font-face

Sinds kort gebruiken wij voor alle website waar een afwijkend lettertype in het ontwerp voorkomt een methode die wat ons betreft het beste, snelste en makkelijkst te implementeren is. Deze methode kan gewoon verwerkt worden in de CSS opmaakcode en is niet afhankelijk van Flash of javascript. @font-face gebruikt lettertypes die in verschillende varianten worden opgeslagen op de server. De verschillende varianten zorgen ervoor dat de lettertype’s zowel in Internet Explorer, Google Chrome, Firefox als Safari altijd goed worden weergegeven.

Een voorbeeld van hoe de lettertype’s op dit weblog gedefinieerd zijn met behulp van @font-face:

@font-face {
 font-family: 'TitilliumText14L250wt';
 src: url('fonts/titilliumtext250wt-webfont.eot');
 src: local('☺'), url('fonts/titilliumtext250wt-webfont.woff') format('woff'), url('fonts/titilliumtext250wt-webfont.ttf') format('truetype'), url('fonts/titilliumtext250wt-webfont.svg#webfontvaNBeGVe') format('svg');
 font-weight: normal;
 font-style: normal;
}

Vervolgens kun je op de manier waarop je gewent bent in de CSS het lettertype kiezen:

#mainmenu li a {
 font-family: TitilliumText14L250wt;
 font-size: 20px;
 color: #CBCCCE;
 padding: 2px 10px 2px 25px;
 background: url(../../../images/bullet.png) no-repeat;
 background-position: 0 5px;
}

Zoals je ziet wordt het gebruiken van eigen lettertype’s op je website een koud kunstje! Een erg handige website die wij dagelijks gebruiken om zogenaamde @font-face kits te genereren is FontSquirrel.