Google - Alle lettertypen met Google


Als je met regelmaat websites ontwikkeld loop je op een gegeven moment tegen het feit aan dat je graag een speciaal lettertype wilt gebruiken. Normaal gesproken heb je slechts de beschikking over een aantal standaard lettertypes die over het algemeen altijd bij een gebruiker aanwezig zijn zoals Arial, Verdana, Tahoma en Times New Roman.

Wil je een ander lettertype gebruiken zijn daar diverse mogelijkheden voor zoals besproken in andere tutorials, dit zijn bijvoorbeeld sIFR, een combinatie van Flash en Javascript of Cufon. Met de komst van CSS 3 en de benodigde ondersteuning door de moderne browsers kan dit al makkelijker opgelost worden.

Misschien uit onverwachte hoek is er ook sinds mei 2010 een oplossing van Google, Google Web Fonts. Zodoende kun je met behulp van Google eenvoudig speciale lettertypes gebruiken die werken in vrijwel alle bekende browsers waaronder Internet Explorer 6. Google Web Fonts bevat allerlei standaard lettertypes, het kan dus wel zijn dat je gewenste font hier niet te vinden is. Er worden wel steeds nieuwe fonts toegevoegd.

Browsers

De browsers die de speciale fonts kunnen tonen zijn:

  • Google Chrome
  • Firefox
  • Safari
  • Internet Explorer: 6 en hoger

Lettertypes gebruiken

Het gebruik van een lettertype is bijzonder eenvoudig. Eerst zoek je dus een lettertype uit op de website van Google. Zodra je een fontje hebt gevonden klik op de lin 'Pop out' om snel te bekijken hoe het lettertype eruit ziet. Klik op de link 'Quick-use' om eveneens een voorbeeld te zien maar ook om de opties te openen om het font te gebruiken. De bijbehorende code om gebruik te maken van een lettertype is te vinden onder het derde kopje in het blauwe vlak 'Add this code to your website:'. Dit gaat als volgt:

Als eerste pak je dan de code die er vergelijkbaar uitziet zoals hieronder (in dit geval het font Reenie Beanie). Plaats deze vermelding in het <head> gedeelte van je website.

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>


In je CSS bestand definieer je vervolgens de koppen, bijvoorbeeld de H1.

h1 { font-family: 'Reenie Beanie', arial, serif; }


En dan ben je eigenlijk al klaar en kan de verdere opmaak van de tekst bepaald worden in het CSS bestand. Zodoende wordt het dus bijzonder eenvoudig om specifieke lettertypes te gebruiken. Je bent niet beperkt tot één lettertype maar je kunt meerdere lettertypen aanroepen en gebruiken. Lettertypes worden dan gescheiden door een |.

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans


CSS 3 features zoals text shadows worden overigens ook ondersteund.

De onderstaande regel is bijvoorbeeld voorzien van een speciaal lettertype (ook selecteerbaar). Het voordeel van de bovenstaande manier is dat het eenvoudiger te implementeren is vergeleken met sIFR of Cufon maar beperkt is qua lettertypen.

Lorem Ipsum


Specifieke letters

Er is nog een andere specifieke mogelijkheid om slechts een aantal karakters op te vragen waardoor het font bestand dat wordt aangeroepen kleiner is en dus je website weer een stukje sneller is. Dit kan erg handig zijn in het geval van bijvoorbeeld een logo.

Dit is te gebruiken door een parameter (&text=HetWoord) toe te voegen aan de vermelding die je plaats in het HEAD gedeelte om het font bestand aan te roepen. Een voorbeeld zie je hieronder. Vervang in dat geval 'HetWoord' voor de letters die je wilt gebruiken.

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&text=HetWoord' rel='stylesheet' type='text/css'>