In de Google Font Directory staan honderden mooie fonts van Google. Ondanks dat dit geen standaard fonts zijn, is er toch een manier om deze fonts te gebruiken voor je website.
In dit artikel laat ik je zien hoe je deze fonts in WordPress en in iedere andere website kunt gebruiken. Deze methode is vrij eenvoudig, basis kennis van html en css is voldoende.
Ik maak gebruik van de Tangerine font, maar je kunt Tangerine vervangen voor de Google font die je zelf wilt gebruiken.
Zet de Google Fonts stylesheet tussen de head tags
Kopieer onderstaande code en plaatst het tussen de head tags (<head>, </head>) en sla de pagina op. Indien je WordPress gebruikt kun je de head tags vinden in de header.php.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
En als je meerdere fonts wilt gebruiken moet je ‘|’ tussen de fonts plaatsen:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Open je style.css
Nu je de stylesheet tussen de head tags hebt geplaatst moet je de google fonts ook nog in je style.css bestand verwerken. Je zou de google fonts voor je headings (h1, h2, etc.) kunnen gebruiken om er mooie titels van te maken, maar je kunt het ook voor je hele website gebruiken.
Persoonlijk zou ik de Google Fonts alleen voor de headings gebruiken, zodat de normale tekst goed en duidelijk leesbaar blijft.
.post h2 {
font-family: "Tangerine", serif;
font-size: 48px;
}
Als je wilt kun je ook gebruik maken van een schaduweffect:
body {
font-family: "Tangerine", serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
2 reacties
Dag Maikel,
Dank voor je artikel, duidelijk. Ik loop al een tijdje te zoeken naar een mogelijkheid om alleen het lettertype in mijn berichten te wijzigen. Kan dat ook, en zo ja hoe?
Mvrgr, Fedde
Ja, dit is mogelijk. Hoe dit precies kan is afhankelijk van het thema dat je gebruikt en valt zo moeilijk te zeggen omdat je website nog under construction is.
Het kan echter heel goed dat je alleen het lettertype van “body” hoeft te wijzigen om het voor elkaar te krijgen.
Voorbeeld:
body {
font-family: "Droid Sans",Arial,Verdana,sans-serif;
font-size: 15px;
}