Embed speciale fonts in je HTML met de Google Fonts API

Als je speciale lettertypen op je website wilt plaatsen ben je meestal beperkt tot 3 mogelijkheden:

– of je gaat ervan uit dat de gebruiker je speciale lettertype ook op zijn pc heeft (en dat is meestal niet zo!),
– of je maakt er een afbeelding van,
– of je maakt gebruik van een “font replace methode” zoals er hier enkele beschreven zijn.

De font replace methode is momenteel nog de meest solide manier, maar kan nogal omslachtig zijn. Zeker nu het sneller én eenvoudiger kan met de Google Fonts API.

Je hoeft enkel te linken naar het font dat je wil gebruiken, en het is beschikbaar. Via CSS roep je dan de juiste properties en bijhorende values op. Dit heeft ook als voordeel dat alles via de server van Google loopt, en er dus geen bandbreedte verloren gaat. Momenteel is het aantal fonts nog vrij beperkt, maar de library zal in de toekomst zeker nog uitgebreid worden.

Een simpel voorbeeldje:

  
    
    
  
  
    
Pixelmountain.be
  

Deze html-code geeft onderstaand resultaat (hier een afbeelding als voorbeeld):

In dit voorbeeld wordt ook de css-property "text-shadow" gebruikt. Deze wordt niet ondersteund in Internet Explorer.
Momenteel is er nog geen ondersteuning voor de iPhone, iPad en andere mobiele telefoons. Maar in deze gevallen wordt de tekst wel degelijk getoond in een default lettertype.

Oh ja, fan van het Lobster font dat ik gebruikte in het voorbeeld? Je kan het hier ook gratis downloaden en gebruiken in je illustraties!