arrow_drop_up arrow_drop_down
3 april 2019 

Google Fonts toevoegen aan je WordPress website (1)

De meeste premium (betaalde) WordPress thema's maken standaard al gebruik van Google Fonts. Maar nog niet álle thema's gebruiken het standaard en vooral bij de gratis thema's uit de directory kun je het nog niet standaard gebruiken. Vandaar dat ik het tijd vond om daar een artikeltje over te schrijven ;) Of eigenlijk twee artikelen, want het artikel van volgende week gaat ook over Google Fonts.

Wat is Google Fonts en wat kun je ermee?

Google Fonts zijn gratis fonts (lettertypes) die beschikbaar zijn gesteld door Google. Dank je, Google! Daar zijn wij heel blij mee! Het zit namelijk zo; op een computer kun je natuurlijk allerlei extra lettertypes installeren. Ik denk dat we dat allemaal weleens hebben gedaan :) Maar op het internet werken lettertypes heel anders. Er zijn sowieso slechts een aantal lettertypes/fonts geschikt voor het web. De keuze is niet echt reuze, wat dat betreft.

Maar Google heeft het mogelijk gemaakt om méér fonts te kunnen gebruiken op een website. Op het moment van schrijven zijn dat welgeteld 915 verschillende fonts. Al deze fonts zijn gratis te gebruiken, ook voor commerciële doeleinden. En ze zijn dus geschikt voor het web, ook niet onbelangrijk.

Waarom kiezen voor Google Fonts?

Google Fonts is ideaal, maar het is natuurlijk niet het enige alternatief voor “custom” fonts op het web. Toch is het verreweg de beste optie als je het mij vraagt.

  • Het is gratis en vrij te gebruiken.
  • Het is makkelijk te installeren, ook voor technische leken.
  • Je hebt gewoonweg véél meer opties en mogelijkheden.
  • En is het natuurlijk ook een stukje branding; dezelfde fonts gebruiken in je gehele huisstijl, dus ook op je website.

Dus ja, ik ben een fan ;) Ik gebruik het op mijn eigen website en op vrijwel alle websites van mijn klanten. Mensen die een (nieuwe) huisstijl laten maken, geef ik dan ook altijd het advies om een font van Google Fonts te kiezen. Dan weet je zeker dat je het kunt gebruiken op het web.

Google Fonts toevoegen (voor experts)

Je kunt het beste Google Fonts toevoegen door heel simpelweg een stukje code te plaatsen in de header.php in de thema map. De handeling is super simpel, maar je moet wel verstand hebben van WordPress en theme-files. Vandaar dat ik het “voor experts” noem.

  • Ga naar Google Fonts.
  • Kies één of meerdere fonts die je wilt toevoegen aan je website. Je selecteert een font door te klikken op het rode rondje met een plusje erin.

  • Zodra je een font selecteert, verschijnt er onderin een zwarte kleine pop-up/venster. Zodra je alle gewenste fonts hebt geselecteerd, klik je op het zwarte venstertje, zodat er meer informatie tevoorschijn komt.
  • Je ziet dan al gelijk de Embed code staan.

  • Selecteer die code en plak het in de
    van header.php
  • Vervang in de style.css de standaard fonts voor de naam van het gewenste font.
  • En dat was het al :)

Wil je meerdere fonts toevoegen? Selecteer ze dan in één keer. Je hoeft dan slechts één regel code te plaatsen i.p.v. meerdere regels code.

Google Fonts toevoegen (voor beginners)

In het artikel van volgende week ga ik uitgebreid bespreken hoe beginners Google Fonts kunnen toevoegen op hun website. In het artikel geef ik daarnaast ook nog allerlei extra tips voor het gebruik van fonts en lettertypes. Stay tuned!

Over de schrijver
Ik (Sandra Boon van Boon Webdesign) ben jouw partner in crime voor WordPress websites en online marketing. Voor ondernemers bouw ik BoonTheme WordPress websites - de perfecte mix tussen kant-en-klaar en maatwerk. Daarnaast bouw ik ook online leeromgevingen voor mijn klanten.
Reactie plaatsen