Lettertype aanpassen WordPress op verschillende manieren (2024)

Soms wil je het lettertype aanpassen in WordPress. Dit kan om verschillende redenen zijn.

Zo kan het zijn dat het er gewoon mooier uitziet, maar ook wordt het lettertype aangepast in verband met SEO optimalisatie.

Bij SEO gaat het dan met name om de H1 en H2 tags (headings). Deze geven voordelen in je uiteindelijke ranking en kunnen aan zoekmachines goed duidelijk maken waar een tekst over gaat.

In dit artikel ga ik verschillende manieren met je doornemen, waarmee het lettertype aanpassen in WordPress een fluitje van een cent wordt!

Hierboven noemde ik al als reden SEO, maar er zijn nog wel wat meer redenen te bedenken waarom het aanpassen van lettertypen handig kan zijn.

Soms is er wat maatwerk nodig, vooral bij landingpages wordt vaak gebruik gemaakt van verschillende lettertypen.

Dit wordt vaak gedaan, omdat bepaalde woorden meer aandacht nodig hebben dan andere. Bijvoorbeeld met prijzen, vaak vind je op websites met producten (diensten) meerdere prijzen.

De aanbieding die het meest interessant is, wordt dan uitgelicht. Voor dit soort doeleinden is het makkelijk om de mogelijkheid te hebben om lettertypen en lettergroten aan te kunnen passen.

Ook wordt het soms gedaan omdat het er dan in sommige gevallen design-technisch net iets beter uitziet. Of omdat een bepaald stukje tekst net wat meer moet opvallen.

We beginnen met Elementor, omdat dit de meest gebruikte WordPress pagebuilder is (bekijk ook onze Elementor review). Ik zal twee manieren met je doornemen.

1. Lettertype van paragraaf aanpassen: Bezoek de pagina waarop je iets wilt aanpassen, vervolgens kun je bovenin de adminbar klikken op “Bewerk met Elementor”. Klik nu op de tekst, waarvan je het lettertype wilt aanpassen.

   Zoek een paragraaf die je wilt aanpassen en klik erop. Vervolgens zie je aan de linkerkant van het scherm een editor, waarmee je de tekst kunt aanpassen. Boven dit gedeelte staan 3 opties waaruit je kan kiezen. Klik hier op: “stijl”.

   Vervolgens kun je klikken op: “typografie”. Hier kom je bij het gedeelte waar je eenvoudig het lettertype kunt aanpassen. Voor een geheel ander lettertype, klik je op: “familie”. Hier kun je vervolgens kiezen uit een groot aantal lettertypen!

2. Heading lettertype aanpassen: Maak gebruik van dezelfde stappen als bij het aanpassen van de lettertypen van een paragraaf (zie stap 1). Wanneer je de pagina hebt geopend, waarop je een titel (heading) wilt bewerken, klik je op de heading waarvan je het lettertype wilt aanpassen.

   Aan de linkerkant van het scherm zal de content te zien zijn en daarboven kun je kiezen uit 3 opties. Klik hier op: “stijl”. Vervolgens zie je de tekst “titel staan”. Klik daaronder op typografie, hier kun je het lettertype aanpassen, door op familie te klikken en uit één van de vele lettertypen te kiezen.

Wanneer je begint met het aanpassen van het lettertype, kan het natuurlijk ook zo zijn dat je gelijk de lettergrote wilt aanpassen. Ook dit gaat heel eenvoudig met Elementor en je hoeft alleen bovenstaande stappen te volgen om dit snel en eenvoudig te doen.

1. Lettergrote paragraaf aanpassen: Volg bovenstaande stappen om bij “stijl” uit te komen. Klik vervolgens op typografie je kunt hier vervolgens het formaat van de letters aanpassen. Bij afmeting, zie je een schuifbalk en hiermee kun je het formaat van de letters instellen.

   Ook kun je de tekst meer styling geven met dikte, schuine letters en onderstreepte letters. Klik vervolgens linksonder op: “bijwerken”. En de aanpassingen zullen direct zichtbaar zijn op de pagina die je aan het aanpassen bent.

2. Lettergrote headings aanpassen: Volg bovenstaand stappen om in het juiste gedeelte terecht te komen. Wanneer je in het gedeelte bent waar je jouw titel (heading) kunt aanpassen, dan vind je onder de content een optie met de naam: “HTML-tag”. Je kunt hier kiezen uit H1 t/m H6.

   H1 wordt over het algemeen gebruikt als de bovenste koptitel op een pagina (ook vanwege SEO). H2 word meestal gebruikt voor subtitels (ook vanwege SEO). Ik zou je willen aanraden om dan ook vooral gebruik te maken van deze twee opties. Vind je de letters dan nog te klein of te groot, dan kun je naar “stijl” gaan.

   Klik vervolgens op typografie en maak gebruik van de schuifbalk bij “afmeting”. Hiermee kun je de letters zo groot of klein maken als je wilt.

Een lettertype aanpassen is geen standaard mogelijkheid binnen de WordPress editor, ongeacht of je gebruik maakt van de standaard of klassieke editor. Gelukkig bestaan er plugins, waarmee het wel lukt.

Voel je er niets voor om er een plugin voor te installeren? Later in dit artikel leg ik ook uit hoe je het lettertype WordPress aanpast met HTML en CSS.

Voor dit voorbeeld maak ik gebruik van de Tinymce-plugin. Om deze te kunnen gebruiken, moet deze eerst geïnstalleerd worden. Na het installeren ga je naar de pagina of het bericht waarvan je het lettertype wilt aanpassen.

Standaard editor: Met de standaard editor kun je ondanks het installeren van Tinymce het lettertype niet aanpassen. Hiervoor die je de klassieke editor in te schakelen, die biedt deze mogelijkheid wel.

Klassieke editor: Voordat je de lettertypen kunt aanpassen, moet je eerst een extra veld aan de editor toevoegen. Dit doe je door in het admin gedeelte in het linkermenu naar instellingen -> tinymce te gaan.

Hier klik je bij het bovenste tabblad op “Klassieke Editor (Tinymce)”. Vervolgens moet je het menu activeren door het vinkje aan te klikken. Daarna zie je onder verschillende tabs. Zoek hier naar het tabje “fontfamilie”. Om deze vervolgens naar de editor te schuiven die je zojuist hebt aangezet.

Scroll nu helemaal naar beneden en klik op: “bewaar wijzigingen”. Je kunt nu het lettertype aanpassen in berichten in pagina’s.

Ga nu naar de pagina of het bericht waar je het lettertype wilt wijzigen en selecteer de tekst. Klik nu op het paragraaficoon en klik op “veranderen naar klassieke paragraaf”. Vervolgens krijg je de klassieke editor te zien, en daar zie je ook het lettertype staan. Klik erop en maak een keuze uit verschillende lettertypen.

Het formaat van de letters kan aangepast worden met zowel de standaard en de klassieke editor. Ook hier maak je gebruik van Tinymce. Kies de pagina of het bericht waar je een groter of kleiner lettertype wilt instellen en klik op de tekst die je wilt aanpassen. (Dit werkt bij allebei de editors op dezelfde manier).

Bij de standaard editor zie je bij titels standaard H2 staan, deze kun je aanpassen naar een formaat die je wilt. Bij een paragraaf klik je op het icoontje met 3 puntjes (uiterst rechts bij de editor). Vervolgens klik je op: “blok instellingen weergeven”. En zie je rechts in je scherm “typografie”. Hier kun je het formaat van de letters aanpassen. Let op: ook hier heb je Tinymce voor nodig.

Sommige themes bieden de mogelijkheid om lettertypes aan te passen met behulp van customizer. Om te zien of jouw WordPress theme dit ondersteunt, kun je het volgende doen:

Ga via het admingedeelte bij het linkermenu naar weergave -> customizer. Je ziet nu als het goed is jouw homepage en aan de linkerkant een menu met verschillende knoppen. Wanneer hier bijvoorbeeld “typografie” staat, dan kun je erop klikken en lettertypes wijzigen en lettergroottes.

Dit is vaak wel sitewide en past dus het lettertype over de gehele website aan. Het kan ook in sommige gevallen zijn, dat er aanpassingen per sectie gemaakt kunnen worden.

Bij sommige themes is het mogelijk om het lettertype aan te passen via de theme opties. De manier waarop je dit kunt doen verschilt per theme. Ik zal hieronder de meest voorkomende manieren doornemen.

Elementor of een andere pagebuilder: Vaak is er bij premium themes wel een pagebuilder aanwezig, waarmee het lettertype aangepast kan worden. In het geval van Elementor, ga je naar de pagina waarop je het lettertype wilt aanpassen en klik je in de adminbar op “Bewerk met Elementor”. Bij overige pagebuilders zit vaak zo’n zelfde mogelijkheid, maar moet je soms in het adminpanel de betreffende pagina openen via “pagina’s” en vervolgens het lettertype aanpassen.

Thema opties in adminmenu: Bij sommige themes hebben de developers ervoor gekozen om extra items in het menu aan te maken. Waarbij je onder andere de kleuren, layout en lettertypes aan kunt passen. Vaak staat er dan in het adminmenu de naam van je theme en door erop te klikken opent er of een dropdown met deze opties of kom je op een pagina waar je de aanpassingen kunt doen.

Lettertype aanpassen via customizer: Sommige themes hebben toevoegingen gemaakt aan WordPress Customizer. Wanneer je via het adminmenu naar weergave -> customizer gaat, dan kan het zijn dat je hier opties zult vinden om onder andere het lettertype aan te passen.

Wanneer je gebruik maakt van Elementor, dan kun je ook het lettertype over de gehele website aanpassen. Dit is vaak een stuk makkelijker dan dat je dit per pagina moet doen of per bericht en mocht je dit alsnog willen doen, dan kan dit altijd nog met HTML/CSS.

Ga in het admingedeelte naar pagina’s en klik bij een pagina (waarop je Elementor gebruikt) op “bewerk met elementor”. Nu krijg je de pagina te zien en zie je aan de linkerkant een menu met verschillende opties.

Bovenaan dit menu, zie je aan de linkerkant een icoontje met 3 streepjes. Klik hierop, gevolgd door Standaard Lettertypen. Hier zie je verschillende opties waar je op kunt klikken. Je kunt hier onder andere het lettertype aanpassen, evenals het formaat van letters en het zal dan over de gehele website aangepast worden

Bij het aanpassen van lettertypes geef ik persoonlijk altijd de voorkeur aan HTML en CSS. Het is handig, snel en doeltreffend. Daarnaast vind ik het ook wel fijn, om zo min mogelijk plugins te installeren en dit komt met name omdat ik van mening ben dat het de snelheid van websites niet ten goede komt.

Maar goed, ik zal een paar manieren doornemen, waarmee je met HTML en CSS eenvoudig en snel lettertypes kunt aanpassen en hoe je het per pagina/bericht kunt aanpakken of over de gehele website.

Lettertypes aanpassen vanuit de WordPress editor

Wanneer je rechtstreeks in een editor het lettertype wilt wijzigen, dan moet je eerst overschakelen naar HTML. Dit doe je bij de standaard WordPress editor door te klikken op de tekst waarbij je iets wilt aanpassen. Vervolgens onderaan de titel zie je het icoon met 3 puntjes. Klik hierop en scroll naar: “als HTML bewerken”.

Je krijgt vervolgens jouw pagina of bericht in HTML te zien en kunt nu aanpassingen gaan maken. Meestal worden lettertypes over de gehele website hetzelfde gehouden, maar mocht je bijvoorbeeld een enkele paragraaf een ander lettertype willen geven, dan kan dat met inline CSS.

<p style=”font-family: verdana;”>Dit is een paragraaf>Je zou dit ook kunnen doen met een enkel woord, bijvoorbeeld zo: <span style=”font-family: verdana;”>Voorbeeld</span>

Een hele pagina voorzien van een ander lettertype

Wil je een hele pagina voorzien van een ander lettertype en dit door middel van CSS bereiken, dan kun je het beste gebruik maken van een plugin waarmee je CSS per pagina kunt aanpassen.

Met een plugin als “Simple CSS”, kun je dit bereiken. Deze geeft de mogelijkheid om per bericht of pagina CSS aan te passen. Wil je dan bijvoorbeeld het lettertype van alle paragrafen aanpassen, dan zou je dat op de volgende manier kunnen doen:

P {

Font-family: verdana;

}

Je kunt op deze manier ook makkelijk en snel het formaat van letters aanpassen en natuurlijk nog veel meer. Deze plugin kun je gebruiken om aanpassingen per pagina/bericht te maken, of over de gehele website!

Er zijn veel verschillende mogelijkheden om je lettertype of lettergrote aan te passen in WordPress. Wij raden je aan om de gemakkelijkste optie voor jou te kiezen. En deze optie ook overall te gebruiken. Als je meerdere methodes door elkaar heen gaat uitvoeren dan kan het zijn dat de styling overhoop raakt.

Mocht je dit toch erg lastig vinden en hulp nodig hebben met jouw WordPress website. Met onze WordPress onderhoudspakketten kunnen wij jou helpen.