Tot ziens sIFR en Cufon, welkom @font-face

Je website mist iets, design, style, vormgeving. Je wilt titels duidelijk naar voren laten komen en zorgen dat ze belangrijk zijn voor optimalisatie. Je bent beperkt tot de ’standaard’ lettertypes. Dan was sIFR of Cufon tot op heden een leuk en goed alternatief. Dan moest Flash en Javascript wel geactiveerd zijn bij de bezoeker, maar dat is verleden tijd! We heten @font-face van harte welkom, met maar 1 enkele CSS file voor de gehele configuratie.

Wat is sIFR?
De afkorting van sIFR staat voor: Scalable Inman Flash Replacement, vrij vertaald naar het Nederlands: ’schaalbare Flash vervanging’. Het is bedoeld om stukken tekst zoals titels (H1, H2, H3 etc.), kleine paragrafen, en quotes te vervangen door een eigen gekozen lettertype.

Een website opzetten wordt vaak gedaan met de 3 standaard lettertypes:

• Arial
• Times New Roman
• Verdana

Deze lettertypes zijn op elke computer standaard geïnstalleerd en dus is de website voor de bezoeker te zien zoals de developer graag wilt. Alleen soms wil een developer een uniek lettertype kunnen gebruiken, en deze als selecteerbare tekst neerzetten i.p.v. een afbeelding ervan te maken. Het leuke hiervan is dus dat het lettertype niet geïnstalleerd hoeft te zijn op het systeem van de website bezoeker.

sIFR en Cufon zijn verledentijd
Sifr en Cufon dit soort ‘”programma’s” files om custom fonts in je site te kunnen gebruiken, maar nu kan dat eindelijk zonder hacks, javascripts of flash; namelijk met alleen een CSS!

@font-face heeft een aantal voordelen tegenover de andere 2:

• custom fonts voor titels en body tekst
• selecteerbaar, dus copypasteable etc, het blijft gewoon tekst
• geen javascript of flash meer nodig

CSS2
CSS2 introduceerde voor het eerste de mogelijkheid om fonts in te bedden in een webpagina, middels de @font-face regel. In de CSS2.1 specificatie was deze regel weer verwijderd. Windows Internet Explorer bleef de functionaliteit echter ondersteunen.

CSS3
In de CSS3 specificatie is de @font-face regel wederom opgenomen. Dit maakt het mogelijk om CSS3 ondersteunende browsers zoals de Firefox (vanaf versie 3.5), Safari (vanaf versie 3.1) en Opera (vanaf versie 10) lettertypes in te bedden.

Hier kunt u kijken vanaf welke browser versie @font-face wordt ondersteund!

Het inbedden van lettertypes door middel van de @font-face regel is een controversieel onderwerp vanwege mogelijke auteursrechten-schendingen. Meestal wordt namelijk niet door de browser gecheckt of een lettertype zomaar gebruikt of gedownload mag worden. Niettemin is de verwachting dat met de introductie van CSS3 deze optie vaker gebruikt zal worden

Gerelateerde blogposts:

• 12 februari 2012 -- De echte Cufon Hover met color techniek