Google web fonts voor WordPress website

Google web fonts werken heel goed op iedere website. In de meeste thema’s is dit geintegreerd. Om je typografie te verfijnen werkt deze WordPress plugin fantastisch.

Eén van de beperkingen van het werken met websites was in het verleden het aantal lettertypen dat je met uw website kunt gebruiken. Google web fonts is een mooie oplossing. Google is heel genereus om je een grote bibliotheek met lettertypen vrijelijk te laten gebruiken door middel van hun Google web fonts bibliotheek.

Deze lettertypen kunnen eenvoudig in iedere website worden geladen. Ze werken altijd. Er zijn tegenwoordig meer dan 1000 google font families. Er zit ook veel rommel tussen. De beste 50 heb ik op een rijtje gezet in het overzicht van de beste en mooiste gratis Google web fonts. In dit artikel leg ik de gratis Easy Google Fonts-plug-in uit.

Easy Google Fonts-plug-in voor lettertypes voor WordPress

In sommige thema’s kun je geen Google fonts inladen. Dit kan worden opgelost door met uw CSS-code te werken, maar hoe los je dit simpeler, eenvoudiger en sneller met een WordPress-site op? De gemakkelijkste manier is om dit op te lossen een plug-in te gebruiken. Via de Easy Google Fonts-plug-in is het veel eenvoudiger om fonts in je site te laden omdat je CSS of andere back-endbestanden niet hoeft te wijzigen.

---

Handleiding Easy Google Fonts-plug-in voor WordPress

Het eerste wat je moet doen is de Easy Google Fonts-plug-in installeren en activeren. Bekijk onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

Customizer-typografie

Na activering, kun je naar de Weergave > Customizer-pagina gaan. Hiermee wordt de interface voor het aanpassen van de live thema-instellingen geopend, waar je het nieuwe kopje Typografie ziet. Als je op Typografie klikt, zie je verschillende secties van je website waar je Google Fonts kunt toepassen. Klik op ‘Lettertype bewerken’ onder de sectie die je wilt bewerken.

Typografische instellingen

Onder het gedeelte font family kun je elk Google-lettertype kiezen datje op uw website wilt gebruiken. Je kunt ook de tekenstijl, lettergrootte, opvulling, marge en meer kiezen. Afhankelijk van je thema kan het aantal secties hier beperkt zijn en kun je de selectie van lettertypen voor veel verschillende delen van uw website mogelijk niet direct wijzigen.

Om dit op te lossen, kun je met de plug-in uw eigen besturingselementen maken en deze gebruiken om lettertypen op uw website te wijzigen. Eerst moet je de pagina Instellingen »Google-lettertypen bezoeken en een naam voor je lettertypebesturing opgeven. Gebruik iets dat je helpt snel te begrijpen waar je dit lettertype-besturingselement gaat gebruiken.

Fontbesturingsgedeelte

Klik op ‘Create font control’ knop en vervolgens wordt je gevraagd om CSS selectors in te voeren. Je kunt HTML-elementen toevoegen die je wilt aansturen (bv. h1 (koptekst 1), h2 (koptekst 2), p, blockquote) of CSS-klassen gebruiken. Je kunt het hulpprogramma Inspecteren gebruiken om erachter te komen welke CSS-klassen worden gebruikt door het specifieke gebied dat je wilt wijzigen.

CSS-selectors toevoegen

Klik nu op de knop ‘Bewaar lettertype’ om je instellingen op te slaan. Je kunt zoveel font-controllers maken als je nodig hebt voor verschillende onderdelen van je website. Om deze lettertypebesturingen te gebruiken, moet je naar Uiterlijk »Customizer gaan en op het tabblad Typografie klikken.

Onder Typografie zie je nu ook een ‘Thema-typografie’-optie. Als je hierop klikt, worden uw aangepaste lettertypen weergegeven die je eerder hebt gemaakt. Je kunt nu op de knop Bewerken klikken om de lettertypen en het uiterlijk voor dit besturingselement te selecteren.

---

Video handleiding Easy Google Fonts-plug-in voor WordPress

De plug-in is bijgewerkt om te werken met de nieuwste versie van WordPress en werkt perfect met geweldige functionaliteit voor het gebruik van de lettertypen. De onderstaande video zien hoe u de plug-in snel kunt laden en gebruiken om Google Fonts in je WordPress-site op te nemen.

Easy Google Fonts-plug-in door Sunny Johal en Amit Kayasth (Titanium Themes)

Meer info over Google web fonts voor WordPress

Info Easy Google Fonts-WordPress plugin