Google heeft een eigen Font Directory waarin honderden verschillende fonts en lettertypes beschikbaar zijn. Deze fonts zijn echter niet standaard te gebruiken, maar moeten op een speciale manier ingesteld worden. In dit artikel lees je hoe je dit kunt instellen op je eigen WordPress website. Gelukkig is het niet al te moeilijk om een custom font in te stellen via WordPress. Je hebt slechts een basiskennis van html en css nodig. Met dit schema ernaast komt vast alles goed. In het voorbeeld wordt gewerkt met het lettertype Tangerine, maar je bent natuurlijk vrij dit aan te passen naar elk lettertype wat je maar wilt.
Google Fonts stappenplan
Binnen twee eenvoudige stappen kan je Google Fonts gebruiken op je website.
- Zet de stylesheet van Google Fonts in de head tags
Door deze code te implementeren in de head tags, weet je website dat je met een apart lettertype wilt gaan werken. Hiervoor moet je in de code op zoek naar de head tags van je website. Deze beginnen met en eindigen met . Via WordPress kun je deze vinden in de header.php.
Kopieer de volgende code in de head tags: Zoals je ziet is hier gekozen voor lettertype Tangerine. Deze kun je aanpassen naar welk lettertype je maar wilt. Wil je werken met meerdere lettertypes, kun je dit aangeven door ‘|’ in te voegen tussen de gewenste lettertypes. Dit ziet er zo uit:<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans|Inconsolata" rel="stylesheet"> - Open je style.css
Je stylesheet staat nu in de head tags van je website, maar moet ook nog in het style.css bestand van je website verwerkt worden.
Je kunt er voor kiezen om je verschillende headers in deze lettertypes uit de Google Font Directory uit te voeren, om de titels net wat meer nadruk te geven. Je kunt ook je hele site uitwerken in een speciaal lettertype. Let er wel op dat dit de leesbaarheid van je website vaak niet verbeterd en dat bezoekers mogelijk sneller wegklikken. Wil je dus wel een apart lettertype, maar wel een fijne ervaring voor je bezoekers, kun je beter alleen de headers of kleine stukjes tekst in een Google Font uitwerken. Kopieer onderstaande code in je style.css bestand:.post h2 {
font-family: "Tangerine", serif;
font-size: 48px;
}
Dat ziet er dan zo uit. Wil je ook nog een schaduweffect toevoegen, voer je de volgende code in:body {
font-family: "Tangerine", serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Met schaduw krijg je het volgende effect.
Google Font Directory inschakelen
Er zijn dus veel verschillende manieren om je website net wat frisser en unieker te maken door het Google Font Directory in te schakelen. Let er wel op dat je niet te veel unieke tekst gebruikt: dan wordt je website al snel onleesbaar. Voor alleen de titels of kleinere stukken tekst kan een uniek font een hele leuke toevoeging op je website zijn.
Bekijk ook onze andere Google gerelateerde blogartikelen
