Home / WordPress / Ontwikkeling / Hoe gebruik je Google Fonts in je WordPress theme?

Hoe gebruik je Google Fonts in je WordPress theme?

Google fonts in WordPress theme

Wanneer je je al enige tijd bezig houdt met het schrijven van html/css of het maken van WordPress themes dan weet je dat je binnen een website niet zo maar elke font kunt gebruiken die je maar wilt. Dat wil zeggen, niet standaard. Er zijn wat 'trucs' bij nodig om het gebruik van niet-standaard fonts alsnog voor elkaar te krijgen. In de praktijk zijn er verschillende methoden. Een relatief eenvoudige is het gebruik van Google web fonts. Google heeft een vrij aardige bibliotheek aan gratis fonts ter beschikking gesteld, die je vrij mag gebruiken. Momenteel zijn er ruim 500 fonts beschikbaar. In dit artikel laat ik je zien hoe je de Google fonts in WordPress kunt gebruiken. Nu zijn er plugins in omloop waarmee je dit kunt oplossen, maar in het kader van 'WordPress themes maken' is het natuurlijk leuker om zelf de code in te duiken.

Google fonts in WordPress theme gebruiken

  1. Kies een Google Font
    Maak een keuze uit de collectie Google web fonts en klik op 'Quick use'.
    Google web  fonts kiezen
  2. Op de volgende pagina scroll je een stukje naar beneden en kopieer je de tekst die je ziet in het blauw omkaderde venster. Zet deze tekst tijdelijk ergens neer, kopieer en plak het bijvoorbeeld naar je kladblok.
  3. Er zijn vervolgens verschillende methoden om de fonts vervolgens in je WordPress theme op te nemen. De @import methode is bijvoorbeeld erg bekend en wordt veel ingezet. Dit zou er als volgt uit kunnen zien:
    @import url(http://fonts.googleapis.com/css?family=Economica);

    Deze methode heeft echter het nadeel dat de browser eerst de import zal uitvoeren en daarna de pagina pas verder laden. Werk je met meerdere Google fonts dan wordt dat nadeel zelfs nog groter. Met andere woorden: dit werkt prima, maar het vetraagt je website.

  4. Hoe moet het dan wel? Het antwoord is eenvoudig. Weet je nog dat je in stap 2 een stukje code hebt bewaard? Dat stukje code neem je gewoon op in je theme files. Vrijwel altijd zal dat in de header.php zijn. De code in je header.php kan er bijvoorbeeld als volgt uit zien:
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Economica" media="screen">
    <link rel="stylesheet" type="text/css" href="jouw theme stylesheet.css" media="screen">
    
  5. Dat is alles. Vervolgens kun je je font gaan gebruiken in je css bestanden. Bijvoorbeeld op de volgende manier:
    h1 { font-family: 'Economica', Helvetica, Arial, serif; } 

Wil je andere fonts gebruiken in een bestaand theme en deze methode toepassen? Dat kan, maar dan is het beter om te werken met een 'child theme'. Meer weten over het maken van je eigen WordPress themes? Bestel dan nu het boek 'WordPress themes maken'!

Was dit artikel nuttig?

Laat het ons weten en geef je rating!

Gemiddeld / 5. Aantal stemmen:

1 reactie

  • Beste Robbert,

    Goed artikel m.b.t. het gebruiken van Google webfonts. Als ontwerper blijf ik het liefst zo ver mogelijk van de broncode verwijderd. Wat is jouw mening t.o.v. het gebruik van de plugin WP Google Fonts om op deze manier als niet programmeur toch van google webfonts gebruik te kunnen maken? Ik heb een test gemaakt op een dummy wp site, waarbij het gebruikersgemak erg goed is en voor zover ik kan zien alles goed werkt.

    Gr, Sander

Plaats een reactie

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