Embed speciale fonts in je HTML met de Google Fonts API

23 Mei 2010

Sneller dan de 'font replacement' methodes

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

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:

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <style>
      h1 {
        font-family: 'Lobster', arial, serif; 
        font-size: 50px;
		text-shadow: 4px 4px 4px #aaa;
 
      }
    </style>
  </head>
  <body>
    <h1>Pixelmountain.be</h1>
  </body>
</html>

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

google font api example Embed speciale fonts in je HTML met de Google Fonts API

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!