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).

hip font html en css

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. FontSquirrel fontkit downloaden

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!

Categorieën: nieuws

Gerelateerde artikelen

nieuws

Zo zit het met de VOG

Voor veel functies is er tegenwoordig een screeningsprocedure waarin een medewerker een Verklaring Omtrent Gedrag (VOG) moet overleggen. Dat kan bijvoorbeeld gaan om docenten, verpleegkundigen, maar ook om vrijwilligers of bestuursleden van bijvoorbeeld een kinderopvang. Lees verder…

nieuws

10 simpele manieren om je privacy online te vergroten

Laatste update op 16 oktober 2017Je wilt graag meer privé zijn als je online bent en minder sporen achterlaten, maar je weet niet waar je moet beginnen? Met deze tien simpele manieren ben je al Lees verder…

nieuws

‘Hey there! I’m updating my WhatsApp privacy settings’

Laatste update op 16 oktober 2017In mijn artikelreeks ‘Dilemma’s van digitalisering’ stip ik aan dat het tegenwoordig eenvoudig is om persoonlijke gegevens uit openbare databases te halen en dat dit vaak niet wenselijk is. Maar Lees verder…