De font-face-eigenschap van CSS3

13-03-2010 Auteur: Melvin

Myriad behoort tot de Linotype-familie

Het juiste font kan je website maken of kraken. Zorg dat je fonts gebruikt die er gewoon goed uitzien en ook echt bij de rest van je ontwerp passen. Ben je uitgekeken op de standaard webfonts? Arial, Helvetica en Times New Roman kennen we nu voortaan wel, hoewel je daarmee met de juiste instellingen hele goede resultaten kunt bereiken. Maar soms voldoet het gewoon net niet.

Er zijn verschillende initiatieven ontstaan, als TypeKit, die een hele bibliotheek aan fonts aanbiedt op abonnementsbasis. Het toevoegen van een regel JavaScript is voldoende om een TypeKit-font te implementeren. FontDeck is een vergelijkbaar alternatief, maar is momenteel nog in bèta en voorlopig nog niet uitontwikkeld.

Deze diensten zouden zomaar overbodig kunnen worden wanneer CSS3 door alle browsers ondersteund wordt en een ‘klein’ licentieprobleem wordt opgelost. Je mag namelijk niet zomaar fonts publiceren en verspreiden via je site. Je dient een licentie te bezitten voor het verspreiden van een font, ofwel gebruik te maken van een vrij te downloaden en gebruiken font. Houd hiermee rekening bij het gebruik van de font-face-tag.

Met het volgende stukje code vertel je de browser waar het lettertype zich bevindt. Als de browser het font al kent, wordt deze niet opnieuw gedownload. Kostbare bandbreedte blijft op die manier gespaard, plus het werkt gewoon veel sneller voor je bezoekers. Je ziet dat we in dit voorbeeld Myriad Pro gebruiken, en zelfs verspreiden via de url. Dit is niet toegestaan maar dient slechts ter illustratie.

  1. @font-face {
  2. font-family: Myriad Pro;
  3. src: local(“Myriad Pro”), url(MyriadPro.ttf) format(“opentype”);
  4. }

Vervolgens kun je het font als volgt gebruiken:

  1. p {
  2. font-family: Myriad Pro, sans-serif;
  3. }

Je weet nu zeker dat je bezoekers alle teksten in hetzelfde lettertype bekijken, waardoor je design uitkomt zoals jij het in gedachte hebt. Als we nog een tip mogen geven: maak het niet te bont. Dat komt de leesbaarheid en het ontwerp niet ten goede. Meer informatie over font-face en licenties vind je op het Mozilla Hacks-blog.

Dit artikel is geplaatst op 13-03-2010 om 09:07 en valt onder de categorie Techniek. Wil je op de hoogte gehouden worden van reacties? Gebruik dan de RSS 2.0 feed. Je kunt een bericht achterlaten of voeg een trackback toe vanaf je eigen site.

Tags:, , , ,

2 reacties op “De font-face-eigenschap van CSS3”

  1. Marco zegt:
    14-03-2010 om 17:45

    @font-face is inderdaad erg handig. Ik gebruik zelf nu Cufon voor headers en navigatie, zeker een aanrader voor als je nog niet over wilt op @font-face en niet wilt betalen voor Typekit.

  2. Marc Kuiper zegt:
    15-03-2010 om 19:38

    Ik hoop dat CSS3 snel door alle browsers wordt ondersteund, het heeft een hoop voordelen :)

Plaats een reactie