Google Webfonts

Typografie was vanaf het begin al een probleem op het web. Niet iedere computer had dezelfde lettertypes en al helemaal geen 'speciale' lettertypes waardoor je genoodzaakt was afbeeldingen te gebruiken voor 'speciale' lettertypes. 

Met het CSS commando @font-face kan er een lettertype worden opgeroepen vanaf een externe locatie, zoals een server. De lettertypes hoeven dan niet op de computer van de bezoeker te staan. Nadeel is wel dat je voor elke browser een apart bestandtype moet hebben. 

Bovendien zijn veel lettertypes gebonden aan licenties die het verbieden om gebruikt te worden op het web. Veel lettertypes die eigendom zijn van Adobe hebben dat probleem. Via Adobe Cloud kun je veel van die lettertypes gebruiken maar voor de meer opensource gebruiker is dat geen optie. 

En daar komt Google Webfont in de picture. Die host namelijk lettertypes die jij gratis mag gebruiken op je website. Dit heeft voor jou als designer natuurlijk als voordeel dat je goedkoper uit bent. Maar het is ook veel makkelijk in je website te gebruiken dan @font-face omdat je gebruik maakt van de @import functie in CSS. 

Als voorbeeld nemen we het 'speciaal' lettertype voor beide methodes. 

Met als eerste de @font-face manier met bestanden op je eigen server.

@font-face {
 font-family: 'speciaal';
 src: url('speciaal.eot');
 src: url('speciaal.eot?#iefix') format('embedded-opentype'),
 url('speciaal.woff') format('woff'),
 url('speciaal.ttf') format('truetype'),
 url('speciaal.svg#ritarot') format('svg');
 font-weight: 400;
 }

De tweede manier is via @import en de servers van Google Webfont.

@import url(http://fonts.googleapis.com/css?family=speciaal);

Vervolgens roep je beide methodes op via de font-family waarde.

p {font-family: 'speciaal', Helvetica;}

Via de methode van Google Webfont heb je geen last van lange codes of het klaarmaken en uploaden van je lettertypes. Bovendien ben je licentie-vrij bezig.