Leestijd: 3 minuten | Gepubliceerd: 12 november 2009

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 verleden tijd

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

Bas ten Broeke
Wij zijn er voor al jouw vragen

Neem contact op als je vragen hebt over het blogartikel of als je een bijzonder project hebt waarbij onze expertise van pas kan komen. Wij staan klaar om je verder te helpen!

    verplicht
    verplicht
    verplicht