Gebruik maken van Google Fonts op je WordPress website

By | 15 oktober, 2015

Inleiding

Door gebruik te maken van speciale fonts, kan je je website flink personaliseren. Helaas wordt er maar een gelimiteerd aantal fonts automatisch ondersteund door webbrowsers. Wil je een speciaal font gebruiken dat niet automatisch ondersteund wordt, dan kan je gebruik maken van Google Fonts.

Met behulp van Google Fonts kan je een stuk code toevoegen aan je website, waarmee je het font als ware installeert op je website. Het stuk code dat je toevoegt, zorgt ervoor dat je site dit font ‘oproept’ bij Google.

Bij Google Fonts heb je keuze uit zo’n 600 gratis webfonts.

Het gebruik van elk Google font maakt je site wel een paar milliseconden langzamer. Zolang je geen tientallen verschillende fonts op je site gebruikt, valt dit erg mee, en zorgt dit niet voor problemen met de snelheid van je site.

Hieronder een aantal interessante voorbeelden van fonts die je zou kunnen installeren op je website:

voorbeeld-van-een-aantal-google-fonts

Voor de volledige instructies van het gebruik van Google fonts, zie onderstaande video.

Een Google Font zoeken en code snippet kopiëren

Ga naar Google Fonts. Hier kan je meer dan 600 open source fonts vinden. Ik vind het browsen met gebruik van de ‘Poster’ tab het makkelijkst, omdat er op die manier de meeste fonts tegelijk worden laten zien. Klik ‘Poster’ als je die weergavemethode wil gebruiken.

Google-font-navigeren

Vind een font dat je wil gebruiken, en klik ‘Add to collection’. Je kan ook meerder fonts tegelijk aan je ‘collection’ toevoegen, en deze allemaal tegelijk installeren. In dit voorbeeld installeer ik één font: het ‘Lobster’ font.

Google-fonts-toevoegen-aan-collectie

Wanneer je alle fonts die je wil installeren hebt geselecteerd, klik ‘Use’ onderaan de pagina.

Google-fonts-use-gebruiken

Dit brengt je naar een pagina waar je de code kan kopiëren. Je hebt deze code nodig om het font aan WordPress toe te voegen. Hier kan je ook extra font styles en ‘character sets’ kiezen.

Scroll omlaag op deze pagina, en selecteer en kopieer de code.

Google-fonts-code-kopieren

De Google Fonts installeren op WordPress

Ga naar je WordPress website, klik ‘Appearance’, en dan ‘Editor’. Selecteer hier de header van je website (header.php).

WordPress-google-font-code-plakken-in-header

Plak de gekopieerde code in de header.php file, direct na het het begin van de head tag; dus direcht achter <head>.

Klik ‘Update file’ om de veranderingen aan je header.php file op te slaan.

En dat is het! Je kan nu dit font gebruiken in WordPress!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *