De gebruikelijke manier om lettertypen te definiëren ziet er ongeveer als volgt uit:
body {
font-family: Arial, Helvetica, sans-serif;
}Hier wordt het body-element toegekend aan het lettertype Arial. Als dit niet beschikbaar is op het systeem van de kijker, zal er worden teruggevallen op Helvetica. Als dat er ook niet is, wordt de browser geïnstrueerd om op zijn minst een sans-serif lettertype te gebruiken. Dit is natuurlijk niet echt te controleren. U heeft uiteindelijk dus geen echte controle over het eindresultaat. Dus wat u zo mooi hebt opgemaakt in GIMP of Photoshop kan mogelijk verloren gaan in het lettertypebos. Meer informatie over hoe dit probleem kan worden opgelost, volgt dan hieronder.
Laten we eerst teruggaan naar de klassieke variant. Hieronder vindt u een typische definitie waarmee het basisuiterlijk van de website wordt aangepast. Met de body-definitie kunt u in eerste instantie de basislettertypen instellen.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Natuurlijk kunt u vervolgens de verschillende elementen van de pagina apart vormgeven. Dit omvat bijvoorbeeld de koppen, cursieve passages, enz. Maar denk in dit verband weer aan het CSS-erfelijkheidsprincipe.
h1 {
font-size: 1.6em;
}Het resultaat kan er in de browser als volgt uitzien:
Webfonts gebruiken
Het probleem met de traditionele lettertype-definities is duidelijk: U kunt uiteindelijk niet echt zeker zijn dat het door u opgegeven lettertype beschikbaar is bij de kijker. Als de browser het lettertype niet vindt, kiezen ze in geval van twijfel een soortgelijke lettertype die u wenst. U heeft dus natuurlijk geen echte controle over het resultaat. Op dit punt biedt @font-face echter uitkomst. Hiermee kunt u expliciet aangeven welk lettertype moet worden gebruikt. Dit werkt in principe net als met afbeeldingen. U moet dus het pad naar het lettertypebestand opgeven.
In moderne browsers worden voor @font-face de zogenaamde WOFF-webfonts gebruikt. Deze lettertypen zijn aanzienlijk kleiner dan de eerder gebruikte Webfont-formaten EOT en TTF.
Een typische @font-face-definitie ziet er als volgt uit:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
De naam van het te gebruiken lettertype wordt genoteerd bij font-family. Tot nu toe zijn er dus geen speciale syntaxis-eigenschappen. Met src:url() wordt de URL opgegeven waar het Webfont-bestand zich bevindt. Als er theoretisch de mogelijkheid bestaat dat het lettertype beschikbaar is op de computers van de gebruikers, moet u ook local opgeven. Aan deze local kent u de naam van het lettertype toe.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Na de @font-face-definitie kunnen de Webfonts vervolgens gewoon worden gebruikt.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Hier zijn bijvoorbeeld de Webfonts beschikbaar
De vraag rijst natuurlijk waar u de betreffende Webfont-bestanden vandaan haalt. Google host bijvoorbeeld veel van deze Webfonts op de site http://www.google.com/fonts.
Deze lettertypen kunt u rechtstreeks via de genoemde site insluiten.
Een passende oproep zou er als volgt uitzien:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Bij font-family wordt het gewenste Webfont opgegeven. Op de genoemde Google-site vindt u deze namen en oproepen. Nadat u het Webfont hebt ingesloten, kan het worden gebruikt zoals elk ander lettertype.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Als u wilt, kunt u op uw pagina ook meerdere Webfonts gebruiken. Hiervoor klikt u op http://www.google.com/fonts bij de gewenste Webfonts op Add to Collection. Wanneer alle Webfonts in uw eigen collectie staan, opent u onderaan de pagina Use. Daar wordt direct een soort meter weergegeven.
Aan de hand van deze afbeelding kunt u zien wat voor effect het insluiten van de Webfonts heeft op de laadtijd van de pagina. Deze effecten zijn meetbaar en nemen toe met elk extra Webfont.
Hoe eenvoudig het is om meerdere webfonts die u eerder aan uw collectie hebt toegevoegd te gebruiken, wordt getoond in het volgende voorbeeld:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
De individuele webfonts worden dus achter elkaar genoteerd en gescheiden door een verticale streep. De volledige oproep die overeenkomt met de geselecteerde collectie wordt weergegeven op de eerder genoemde Use-pagina.
Veel van de webfonts bieden zogenaamde subsets zoals Latijns of Cyrillisch. Om deze expliciet op te nemen, geeft u de gewenste subset op als parameterwaarde.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Als meerdere van deze subsets moeten worden gebruikt, worden ze elk door een komma gescheiden genoteerd.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Het gebruik van deze webfont is echter om een heel andere reden niet zonder controverses. Allereerst moet bij het laden van de pagina een verbinding met een Google-server worden gemaakt. Dit kan worden omzeild door het downloaden van het webfont-bestand en het uploaden naar uw eigen server. Let echter in elk geval op de gebruiksvoorwaarden van de webfonts die u op deze manier wilt gebruiken.
De letterdefinitie van de voorbeeldpagina
Hieronder vindt u de letterdefinities die ik zal gebruiken voor de huidige voorbeeldpagina:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Natuurlijk kunt u extra elementen toevoegen. In dit geval is deze syntax echter voldoende.
