Speciale lettertypes gebruiken in je website

Indien je vroeger gebruik wou maken van niet-standaard lettertypes in je website werd dit meestal opgelost door gebruik te maken van afbeeldingen of Flash. Daar deze tekst dan niet langer indexeerbaar is door zoekmachines als Google is dit natuurlijk geen interessante oplossing.

Na verloop van tijd verschenen er gelukkig enkele verschillende mogelijkheden om dit probleem op te lossen, elk met zijn eigen voor- en/of nadelen.
Cufon en sIFR zijn hier voorbeelden van. Zelf heb ik in deze Drupal template ook gebruik gemaakt van Cufon om de site naam (Carette Donny) aan te passen.
Door gebruik te maken van Cufon kan je eender welk lettertype gebruiken, jammer genoeg zie je af en toe bij het laden van de pagina het default lettertype dat dan vervangen word door je custom font.

Sinds kort kun je gebruik maken van de Google Fonts API, meer hier over vind je terug op Google Fonts API Labs.
Hieronder zal ik een klein voorbeeld tonen hoe eenvoudig het is om gebruik te maken van één van de aangeboden lettertypes.

Als eerste dien je de stylesheet van Google in te laden in de head van je HTML-code (Als voorbeeld heb ik hier het font 'Lobster' gekozen):

link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"

Daarna kan je het lettertype gebruiken in je CSS zoals je andere fonts zou gebruiken. In onderstaand voorbeeld voeg ik het toe met INLINE CSS:

style="font-family: Lobster; font-size: 2em; background-color: #fff; color: #000;"

Dit geeft dus:

Zoals je kan zien word de tekst dadelijk vervangen en blijft hij selecteerbaar