In het artikel ‘Fleur je blog op met Web Fonts‘ vertelt Brenda van de Wal je al iets over de hippe letters die je tegenwoordig in je website kunt gebruiken. Ze geeft verschillende voorbeelden van sites waar je mooie fonts kunt vinden. 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.
<html>
<head>
<title>Externe fonts binnenhalen van Google Webfonts</title>
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
<style>
body { margin:0; padding:0; border:0; font-size: 100%; font-family: 'AbeeZee', arial, sans-serif;}
html {font-size: 85%;}
#wrapper {
text-align: left;
background: #fff url() repeat-y !important;
margin: auto;
height: 100%;
width: 1024px;
-moz-box-shadow:1px 3px 15px #666;
-webkit-box-shadow:1px 3px 15px #666;
box-shadow:1px 3px 15px #666;
}
h2 {
font-family: 'Cabin Sketch', arial, sans-serif;
text-shadow: 4px 4px 4px #aaa;
font-size: 300%;
}
h2, p {padding: 5px 20px 5px 20px;}
.abc { font-family: 'AbeeZee', arial, sans-serif; }
</style>
</head>
<body>
<div id="wrapper">
<h2>Abeezee</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent euismod nulla. Curabitur eleifend. Nullam aliquam, justo ut dignissim mattis, nunc arcu rhoncus ipsum, sed suscipit elit pede ac tellus. Sed scelerisque varius nulla. Nullam eu magna tempor augue rhoncus auctor. Donec eleifend tempus turpis.</p></div></body></html>
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.
<html>
<head>
<title>lokaal font binnenhalen via @fontface</title>
<style>
@font-face {
font-family: 'CaviarDreamsRegular';
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-size: 42px;
font-family: CaviarDreamsRegular, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 100;
}
p {font-family: 'CaviarDreamsRegular', arial, sans-serif;}
</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.
Verder nog dit: voor de css-code ‘font-weight’ kun je ‘bold’ gebruiken. Dat weet je vast. Maar je kunt ook de dikte van het font in stappen opgeven van 100 tot 900. Daarbij is 400 ‘normal’ en 700 ‘bold’. Zo kun je dus je eigen light-versie van een font kiezen.
Veel plezier en inspiratie!
Links
webdesignermagazine.nl – mooie typografie
Bens hobbyhoekje
Google Webfonts, getting started
Comments are closed.