Enkele dagen geleden introduceerde Google naast Google TV ook een andere interessante dienst voor website ontwikkelaars: de Google Fonts API. Hiermee wordt het mogelijk om meer verschillende lettertypen te gebruiken voor je website, zonder je zorgen te maken of de gebruiker een bepaald lettertype wel geïnstalleerd heeft. Daarnaast hoef je de 'custom fonts' ook niet te hosten op je eigen server wat bandbreedte scheelt!

In de webtip van vandaag gaan we kijken hoe we de Google Fonts API kunnen toepassen en je dus je eigen, custom lettertypen kunt gebruiken op je website met alle voordelen van dien.

De Google Fonts

Op het moment van schrijven bevat de Google Fonts directory 18 lettertypen die je kunt gebruiken in combinatie met de Google Fonts API, maar dit aantal zal de komende tijd zeker worden uitgebreid.

Hoe te gebruiken?

Laten we maar eens kijken hoe we de API kunnen toepassen voor gebruik op je eigen website. Om te beginnen laden we een speciaal CSS bestand in die op zijn beurt weer de betreffende lettertypen laadt. Willen bijvoorbeeld het lettertype 'Lobster' gebruiken, dan zetten we de volgende code tussen onze head-tags:

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

Wil je meerdere lettertypen gebruiken, dan kun je het |-teken gebruiken om meerdere lettertypen te scheiden. Willen we bijvoorbeeld de lettertypen Tangerine, Inconsolata, en Droid Sans gebruiken, dan kunnen we de volgende code tussen de head tags zetten:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Zoals je ziet worden spaties in de naam van het lettertype vervangen door het +-teken (zie Droid Sans).

Vervolgens hoeven we alleen het lettertype nog aan te roepen om te gebruiken. Willen we een bepaald lettertype bijvoorbeeld overal in onze H1-tags gebruiken, dan zetten we de volgende regel in ons CSS bestand:

h1 { font-family: 'Droid Sans', serif; }

Dikgedrukte en schuine tekst

Wil je dikgedrukte en/of schuinte tekst weergeven dan kun je de betreffende lettertypen aanroepen door achter het lettertype een dubbele punt te zetten en vervolgens de letter 'b' (bold), 'i' (italic) of 'bi' (bold italic) te zetten:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b">

Je kunt ook de volledige benaming gebruiken (bold, italic, bolditalic):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold">

Uiteraard zijn de fonts ook te gebruiken met de nieuwe functies van CSS 3, bijvoorbeeld het toevoegen van schaduw aan je tekst.

Demo

De Google Font API is al met al dus een erg handige dienst van Google en zeer snel en makkelijk te gebruiken. Door het gebruik van de API bespaar je bandbreedte en profiteer je ook nog eens van de cache-functies van de API.

Een demo vind je op deze pagina.