De beste Google Fonts voor je Wordpress website [2019]

Laatste aanpassing: 3 maanden geleden

Wanneer je aan de slag gaat met je Wordpress website, wil je natuurlijk dat deze er gelikt uitziet. Naast het theme, of thema in het Nederlands, bepaalt het lettertype dat je gebruikt voor een groot deel de look and feel van je website. Maar waar vind je een geschikt lettertype? Google Fonts is een prima plek om het perfecte lettertype te vinden.

Wat is Google Fonts?

In 2010 startte onder de naam Google Web Fonts als platform voor gratis webfonts met een open source licentie. Vóór 2010 werd vaak gebruikgemaakt van lettertypes die standaard op elke computer geïnstalleerd waren. Op die manier wisten webbouwers zeker dat de website er voor iedereen hetzelfde uitzag. Het beperkte de keuze in lettertypes, en dus je branding, enorm.

Met de komst van Google Fonts deden gratis webfonts hun intrede. Deze lettertypes staan online en iedereen die jouw website bezoekt, installeert dit font automatisch. Daardoor kun jij uiting geven aan jouw eigen (merk-)identiteit, zonder bang te hoeven zijn dat jouw bezoekers iets heel anders te zien krijgen!

Google Fonts en Wordpress

Veel moderne Wordpress themes hebben een koppeling met Google Fonts. Dat betekent dat je niets hoeft te installeren om gebruik te maken van Google Fonts, behalve het gewenste lettertype selecteren. Maar met maar liefst 915 verschillende lettertypes in de bibliotheek van Google, kan het nog steeds een behoorlijke klus zijn om het juiste lettertype te vinden.

Heeft jouw theme geen Google Font-koppeling?

Ook wanneer jouw theme niet standaard gebruikmaakt van Google Fonts, kun je gebruik maken van deze handige webfonts. Daarvoor hoef je alleen maar de volgende stappen te volgen:

De handmatige implementatie van Google Fonts op je website bestaat uit twee delen. Om te beginnen moet je in het hoofd van je HTML-code het juiste Google Font oproepen. Dit doe je door een tag te plaatsen. Zodra je het gewenste font geselecteerd hebt op de Google Fonts website, vertelt Google je precies waar deze moet staan.

Met de volgende tag geef je bijvoorbeeld aan dat je het Lato-lettertype met een dikte van 400 op je website wilt implementeren.


<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400” rel="stylesheet">
</head>

Vervolgens geef je aan waar je de Google Fonts in wilt zetten. Dit doe je in de CSS-stylesheet. Selecteer een element en koppel het door jou opgeroepen Google Font hieraan via de font-family selector.

Met de volgende stijlregel koppel je alle tekst op een webpagina via de body selector aan het Lato font. Zou er om één of andere reden iets misgaan met het downloaden van dit lettertype, staat er als back-up een opdracht in de code die de browser laat zoeken naar een alternatief ‘sans serif’ lettertype.

body {font-family: ‘Lato’, sans-serif; font-size: 40px;}

Welke Google Fonts kun je het best gebruiken?

Nu je weet hoe je de lettertypes uit de Google-bibliotheek aanroept en implementeert, is het tijd om uit de 915 aangeboden fonts het ideale font voor jouw website te selecteren. Nog een beste klus. Want waar begin je? Daarom zetten wij de meest populaire even voor je op een rijtje.

Bij het maken van deze selectie hebben we niet alleen gekeken naar populariteit, maar ook naar welke weblettertypen het meest geschikt zijn voor koppen en alinea’s én die comfortabel zijn om te lezen op een mobiel apparaat, of dat nu een smartphone, desktop of tablet is.

De 24 beste Google Fonts:

  1. Karla
  2. Frank Ruhl Libre
  3. Lora
  4. Playfair Display
  5. Archivo
  6. Spectral
  7. Fjalla One
  8. Roboto
  9. Montserrat
  10. Rubik
  11. Source Sans Pro
  12. Cardo
  13. Cormorant
  14. Work Sans
  15. Rakkas
  16. Concert One
  17. Yatra One
  18. Arvo
  19. Lato
  20. Abril FatFace
  21. Ubuntu
  22. PT Serif
  23. Old Standard TT
  24. Oswald

Aan de slag met jouw gekozen font!

Heb je in bovenstaande lijst het font gevonden dat jouw identiteit perfect weergeeft? Dan is het tijd om aan de slag te gaan met jouw Wordpress-website en het lettertype te implementeren. Past geen van bovenstaande lettertypes in jouw huisstijl, kun je natuurlijk ieder ander font van Google Fonts gebruiken. Heb je nog een andere vraag? Onze klantenservice staat voor je klaar!