Laatste update op 17 oktober 2017
Tegenwoordig kun je hippe letters op je website gebruiken. In dit artikel lees je hoe je zulke fonts kunt toepassen: hoe haal je ze binnen, of hoe roep je ze intern aan in je code. Je kunt de code zo kopiëren; dus kun je lekker snel aan de slag.
Extern? Voorbeeld Google Webfonts
Er zijn al bijna 600 fonts via Google Webfonts beschikbaar voor je site. In de head van je pagina roep je het font aan. In de css geef je aan welke font-family je wilt gebruiken. Kopieer onderstaand voorbeeld en sla op als HTML-bestand. Je kunt precies zien hoe het werkt (klik op de afbeelding en het tekstbestand wordt in een nieuw venster geopend: kopieer/plak).
Intern? @font-face gebruiken
Wil je je fonts vanaf je eigen webruimte aanbieden, dan is het zaak dat je een complete fontkit downloadt. Dan weet je zeker dat je fonts in de meeste browsers goed worden vertoond. Een goede website voor fonts die je gratis op commerciële websites kunt gebruiken is FontSquirrel.com. Een echte aanrader, want vanwege auteursrechten mag je natuurlijk niet ieder font zomaar gebruiken.
Een complete fontkit omvat een TTF-, EOT-, WOFF- en SVG-bestand van het font. Die roep je aan via @font-face in je stylesheet. In het voorbeeld hieronder moet je de directory ‘fonts’ natuurlijk vervangen door de directory waar jij de fonts laat. Vervolgens geef je via de normale css-code aan hoe je dit font wilt gebruiken. Kopieer onderstaand voorbeeld en sla op als HTML-bestand.
<html>
<head>
<title>lokaal font binnenhalen via @fontface</title>
<style>
@font-face {
src: url(‘fonts/CaviarDreams-webfont.eot’);
src: url(‘fonts/CaviarDreams-webfont.eot?#iefix’)format(‘embedded-opentype’),url(‘fonts/CaviarDreams-webfont.woff’)format(‘woff’),url(‘fonts/CaviarDreams-webfont.ttf’)format(’truetype’),url(‘fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular’) format(‘svg’);
}
h1 {font-weight: 100;}
p {}
</style>
</head>
<body>
<h1>Dit is een Heading 1</h1>
<p>Tekst</p>
</body>
</html>
Download het font Caviar Dreams zoals gebruikt in de code van het voorbeeld hierboven. 
Kortom: trendy in een wip
Het is dus echt heel eenvoudig om andere fonts binnen je site te gebruiken. Tip: controleer áltijd of de fonts werken in de browsers die jij het belangrijkst vindt. Is dit niet het geval dan kun je tijdig een alternatief kiezen. Doe je dat niet, dan wordt een standaardfont getoond. Let er bovendien op dat je niet te veel fonts gebruikt; dit beïnvloedt de laadtijd van je pagina negatief.Veel plezier en inspiratie!
