Home / Websites maken / Website lettertypes

Website lettertypes

Google Web Fonts maakt het gemakkelijk om bijzondere lettertypes te gebruiken op websites. Het werkt in de meeste browsers, zonder omslachtige scripts.

Op webpagina's kun je standaard alleen gebruik maken van lettertypes die op de meeste computers aanwezig zijn, zoals Verdana, Arial, Tahoma en Times New Roman. De technieken om andere fonts te gebruiken - zoals WEFT en sIFR - waren tot nu toe omslachtig en werkten niet in alle browsers. Google Web Fonts kan hierin verandering brengen: een simpele webtechniek die goed werkt in de meest gebruikte browsers.

Hoe werkt het?
Je zoekt een lettertype uit op de website van Google. Je kopieert de bijbehorende code en plaatst deze op de webpagina. Het lettertype is nu te gebruiken in het stylesheet, zoals lettertypes die standaard op computers aanwezig zijn.

Voor welke browsers?
Internet Explorer 6 en hoger, Firefox, Chrome, Safari.

Beperkingen van Google Web Fonts
Je kan alleen gebruik maken van de font collectie van Google, en geen eigen fonts toevoegen. De collectie wordt wel regelmatig uitgebreid. De lettertypes moeten uiteraard worden geladen bij het bekijken van een pagina: dit maakt de website trager. Om wachttijden te voorkomen is het af te raden om veel fonts op één pagina te gebruiken. Niet alle fonts zijn even zwaar: bij elk Google Web Font staat vermeld wat de laadtijd is.

Voor wie is deze handleiding?
Deze handleiding is voor iedereen die een eigen website maakt, en zelf de HTML-code en het stylesheet kan wijzigen.

Handleiding Google Web Fonts

In deze handleiding wordt een lettertype gekozen uit de Google Web Font collectie, en ingevoegd op een webpagina. Het voorbeeld uit de handleiding is ook te downloaden.

Ga naar Google Web Fonts en klik op Start choosing fonts
Kies een font en klik op Quick-use.
Scroll omlaag en kopieer de code bij Add this code to your website.
Open de webpagina in een webeditor (of in Kladblok/Notepad).
Plak de code in het <head> gedeelte van de pagina.
Open het stylesheet van de pagina, en voeg de naam van het lettertype toe.
De naam is te zien op de Google Web Fonts website (onder de ingevoegde code).
Plaats de webpagina en het stylesheet op de webserver.
Het lettertype is nu werkend te zien in de browser.

Lorem ipsum

Subsets gebruiken om de laadtijd te verminderen

Standaard worden alle karakters van een lettertype geladen, inclusief bijzondere tekens zoals ô en ø. Je kan ook een subset laden: alleen de gebruikte letters en tekens. Dit scheelt onnodige laadtijd. Om zo'n subset te gebruiken wordt er een extra code geplaatst met de benodigde letters.

Voorbeeld 1. Laden van de letters van een logo:

http://fonts.googleapis.com/css?family=Cabin Sketch&text=Mijnlogo

Voorbeeld 2. Laden van cijfers, letters en aanhalingstekens:

http://fonts.googleapis.com/css?family=Cabin Sketch&text=
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz%20%27%22

Kiezen van het juiste lettertype

Een handig hulpmiddel bij het uitzoeken van fonts is The Web Font Combinator. Lettertypes en lettergrootte zijn te kiezen uit een keuzelijst met Google Web Fonts, en direct te zien in de pagina.

Zie ook: Fonts downloaden
Zie ook: Gratis website