Nieuwsberichten & Blogs

Google Webfonts

Moe van vastlopende Cufon scripts, omslachtige sIFR of Flash extensies om wat andere lettertypen op het web te ontsluiten? Met Google Webfonts is dat verleden tijd; een krachtige maar vooral lichte engine die cross-browser (zelfs in IE6) werkt. Op dit moment ondersteunt Google een kleine 250 lettertypen en dit aantal blijft groeien. Niet toevallig begon Google met de lettertypen ‘Droid Sans’ en ‘Droid Serif’; fonts die in Android gebruikt worden. De lettertypen die Google aanbiedt zijn vrij te gebruiken en worden middels een API aangeroepen. Omdat Google zijn dienst gratis maakt heeft het een voorsprong op diensten als ‘FontDeck’; eenzelfde soort dienst, maar tegen betaling. Een combinatie met CSS3 zorgt voor de mogelijkheid tot gebruik van bijvoorbeeld schaduwen en rotaties. Met de Font Previewer kun je de CSS code genereren.

 

In de heading van de pagina dient een verwijzing te komen naar Google Webfonts:

 

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

 

In de stylesheet dient een verwijzing te komen naar het lettertype:

 

	body { font-family: ‘Ariston’, serif; }

 

Design and Develop for the Web

Maakt het web aantrekkelijker!

WebFont Loader

Indien de wens ontstaat om meerdere lettertypen te gebruiken (niet alleen afkomstig van Google maar bijvoorbeeld ook van FontDeck), kun je gebruik maken van WebFont Loader.

 

Dit is een stukje javascript dat meer controle geeft dan de API van Google. Je kunt events afvuren in verschillende stadia van het inladen. Dit zorgt ervoor dat alle browsers dezelfde opmaak hebben. Styles zijn direct in code aan te passen of via CSS. De volgende events worden aangemaakt wanneer de browser de webfonts gaat downloaden:

 

  • Loading: Wanneer lettertypen beginnen te downloaden
  • Active: Wanneer lettertypen klaar zijn met downloaden
  • Inactive: Wanneer lettertypen niet geladen worden